<!DOCTYPE html><html><head>
      <title>interview</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="file:////Users/jbt/.vscode/extensions/shd101wyy.markdown-preview-enhanced-0.5.18/node_modules/@shd101wyy/mume/dependencies/katex/katex.min.css">
      
      
      
      
      
      
      
      
      
      <style>
      /**
 * prism.js Github theme based on GitHub's theme.
 * @author Sam Clarke
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #333;
  background: none;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: .8em;
  overflow: auto;
  /* border: 1px solid #ddd; */
  border-radius: 3px;
  /* background: #fff; */
  background: #f5f5f5;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
  background: #f5f5f5;
}

.token.comment,
.token.blockquote {
  color: #969896;
}

.token.cdata {
  color: #183691;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #333;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.builtin {
  color: #a71d5d;
}

.token.string,
.token.url,
.token.regex,
.token.attr-value {
  color: #183691;
}

.token.property,
.token.number,
.token.boolean,
.token.entity,
.token.atrule,
.token.constant,
.token.symbol,
.token.command,
.token.code {
  color: #0086b3;
}

.token.tag,
.token.selector,
.token.prolog {
  color: #63a35c;
}

.token.function,
.token.namespace,
.token.pseudo-element,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.id,
.token.url-reference .token.variable,
.token.attr-name {
  color: #795da3;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
  color: #1d3e81;
}

.token.list {
  color: #ed6a43;
}

.token.inserted {
  background-color: #eaffea;
  color: #55a532;
}

.token.deleted {
  background-color: #ffecec;
  color: #bd2c00;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}


/* JSON */
.language-json .token.property {
  color: #183691;
}

.language-markup .token.tag .token.punctuation {
  color: #333;
}

/* CSS */
code.language-css,
.language-css .token.function {
  color: #0086b3;
}

/* YAML */
.language-yaml .token.atrule {
  color: #63a35c;
}

code.language-yaml {
  color: #183691;
}

/* Ruby */
.language-ruby .token.function {
  color: #333;
}

/* Markdown */
.language-markdown .token.url {
  color: #795da3;
}

/* Makefile */
.language-makefile .token.symbol {
  color: #795da3;
}

.language-makefile .token.variable {
  color: #183691;
}

.language-makefile .token.builtin {
  color: #0086b3;
}

/* Bash */
.language-bash .token.keyword {
  color: #0086b3;
}

/* highlight */
pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
}
pre[data-line] .line-highlight-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: block;
  width: 100%;
}

pre[data-line] .line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  background: hsla(24, 20%, 50%,.08);
  background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}

pre[data-line] .line-highlight:before, 
pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: .4em;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  background-color: hsla(24, 20%, 50%,.4);
  color: hsl(24, 20%, 95%);
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: .3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white;
}

pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: .4em;
}html body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ul,html body>ol{margin-bottom:16px}html body ul,html body ol{padding-left:2em}html body ul.no-list,html body ol.no-list{padding:0;list-style-type:none}html body ul ul,html body ul ol,html body ol ol,html body ol ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;background-color:#f0f0f0;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:bold;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em !important;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::before,html body code::after{letter-spacing:-0.2em;content:"\00a0"}html body pre>code{padding:0;margin:0;font-size:.85em !important;word-break:normal;white-space:pre;background:transparent;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;font-size:.85em !important;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:before,html body pre tt:before,html body pre code:after,html body pre tt:after{content:normal}html body p,html body blockquote,html body ul,html body ol,html body dl,html body pre{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body pre,html body code{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview .pagebreak,.markdown-preview .newpage{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center !important}.markdown-preview:not([for="preview"]) .code-chunk .btn-group{display:none}.markdown-preview:not([for="preview"]) .code-chunk .status{display:none}.markdown-preview:not([for="preview"]) .code-chunk .output-div{margin-bottom:16px}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0}@media screen and (min-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px + 2em)}}@media screen and (max-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{font-size:14px !important;padding:1em}}@media print{html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,0.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{padding:0 1.6em;margin-top:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li{margin-bottom:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{list-style-type:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% -  300px);padding:2em calc(50% - 457px -  150px);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

      </style>
    </head>
    <body for="html-export">
      <div class="mume markdown-preview  ">
      <h1 class="mume-header" id="frontend-interview">FrontEnd Interview</h1>

<ul>
<li><a href="#frontend-interview">FrontEnd Interview</a>
<ul>
<li><a href="#js-%E5%9F%BA%E7%A1%80">js &#x57FA;&#x7840;</a>
<ul>
<li><a href="#1%E5%8E%9F%E5%9E%8B">1.&#x539F;&#x578B;</a></li>
<li><a href="#2%E5%8E%9F%E5%9E%8B%E9%93%BE">2.&#x539F;&#x578B;&#x94FE;</a></li>
<li><a href="#3new-%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%BF%87%E7%A8%8B">3.new &#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x7684;&#x8FC7;&#x7A0B;</a></li>
<li><a href="#4js-%E7%BB%A7%E6%89%BF">4.js &#x7EE7;&#x627F;</a></li>
<li><a href="#5bindcall-%E5%92%8C-apply-%E7%9A%84%E5%8C%BA%E5%88%AB">5.bind&#xFF0C;call &#x548C; apply &#x7684;&#x533A;&#x522B;</a></li>
<li><a href="#6class-%E5%92%8C-es5-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%9A%84%E5%8C%BA%E5%88%AB">6.class &#x548C; es5 &#x6784;&#x9020;&#x51FD;&#x6570;&#x7684;&#x533A;&#x522B;</a></li>
<li><a href="#7%E9%97%AD%E5%8C%85%E5%92%8C%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%B9%B3%E6%97%B6%E5%93%AA%E4%BA%9B%E5%9C%B0%E6%96%B9%E7%94%A8%E5%88%B0%E8%BF%87%E9%97%AD%E5%8C%85">7.&#x95ED;&#x5305;&#x548C;&#x4F5C;&#x7528;&#x57DF;&#xFF0C;&#x5E73;&#x65F6;&#x54EA;&#x4E9B;&#x5730;&#x65B9;&#x7528;&#x5230;&#x8FC7;&#x95ED;&#x5305;&#xFF1F;</a></li>
<li><a href="#8%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF">8.&#x4E8B;&#x4EF6;&#x5FAA;&#x73AF;</a></li>
<li><a href="#9this-%E6%8C%87%E5%90%91">9.this &#x6307;&#x5411;</a></li>
<li><a href="#10dts-%E6%96%87%E4%BB%B6%E7%9A%84%E4%BD%9C%E7%94%A8">10.d.ts &#x6587;&#x4EF6;&#x7684;&#x4F5C;&#x7528;</a></li>
<li><a href="#11require-%E5%92%8C-import-%E7%9A%84%E5%8C%BA%E5%88%ABcommonjs-%E5%92%8C-es6-%E8%A7%84%E8%8C%83">11.require &#x548C; import &#x7684;&#x533A;&#x522B;(CommonJs &#x548C; es6 &#x89C4;&#x8303;)</a></li>
<li><a href="#12var-let-const-%E7%9A%84%E5%8C%BA%E5%88%AB">12.var&#x3001;let&#x3001;const &#x7684;&#x533A;&#x522B;</a></li>
<li><a href="#13%E7%AE%80%E8%BF%B0%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7">13.&#x7B80;&#x8FF0;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x7684;&#x65B0;&#x7279;&#x6027;</a></li>
<li><a href="#14asyncawait-%E5%92%8C-promise-%E7%9A%84%E5%8C%BA%E5%88%AB">14.async/await &#x548C; promise &#x7684;&#x533A;&#x522B;</a></li>
<li><a href="#15%E5%AF%B9-promise-%E7%9A%84%E7%90%86%E8%A7%A3">15.&#x5BF9; Promise &#x7684;&#x7406;&#x89E3;</a></li>
<li><a href="#16js-%E4%B8%AD%E7%9A%84%E6%B7%B1%E5%85%8B%E9%9A%86%E5%92%8C%E6%B5%85%E5%85%8B%E9%9A%86">16.js &#x4E2D;&#x7684;&#x6DF1;&#x514B;&#x9686;&#x548C;&#x6D45;&#x514B;&#x9686;</a></li>
<li><a href="#17js-%E4%B8%AD%E7%9A%84%E5%A0%86%E5%92%8C%E6%A0%88">17.js &#x4E2D;&#x7684;&#x5806;&#x548C;&#x6808;</a></li>
<li><a href="#18%E4%BD%BF%E7%94%A8-es6-%E5%A6%82%E4%BD%95%E5%90%88%E5%B9%B6%E5%A4%9A%E4%B8%AA%E5%AF%B9%E8%B1%A1%E5%A4%8D%E5%88%B6%E5%AF%B9%E8%B1%A1">18.&#x4F7F;&#x7528; ES6 &#x5982;&#x4F55;&#x5408;&#x5E76;&#x591A;&#x4E2A;&#x5BF9;&#x8C61;&#xFF0C;&#x590D;&#x5236;&#x5BF9;&#x8C61;</a></li>
</ul>
</li>
<li><a href="#%E6%B5%8F%E8%A7%88%E5%99%A8">&#x6D4F;&#x89C8;&#x5668;</a>
<ul>
<li><a href="#1%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98">1.&#x6D4F;&#x89C8;&#x5668;&#x7F13;&#x5B58;</a></li>
<li><a href="#2%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AD%98%E5%82%A8">2.&#x6D4F;&#x89C8;&#x5668;&#x5B58;&#x50A8;</a></li>
<li><a href="#3%E8%B7%A8%E5%9F%9F">3.&#x8DE8;&#x57DF;</a></li>
<li><a href="#4%E5%89%8D%E7%AB%AF%E5%AE%89%E5%85%A8">4.&#x524D;&#x7AEF;&#x5B89;&#x5168;</a></li>
<li><a href="#5%E6%B5%8F%E8%A7%88%E5%99%A8%E5%9C%B0%E5%9D%80%E6%A0%8F%E8%BE%93%E5%85%A5-url-%E5%88%B0%E6%98%BE%E7%A4%BA%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%AD%A5%E9%AA%A4">5.&#x6D4F;&#x89C8;&#x5668;&#x5730;&#x5740;&#x680F;&#x8F93;&#x5165; url &#x5230;&#x663E;&#x793A;&#x9875;&#x9762;&#x7684;&#x6B65;&#x9AA4;</a></li>
<li><a href="#6%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E7%9A%84%E6%AD%A5%E9%AA%A4">6.&#x6D4F;&#x89C8;&#x5668;&#x6E32;&#x67D3;&#x7684;&#x6B65;&#x9AA4;</a></li>
<li><a href="#7%E9%87%8D%E7%BB%98%E5%9B%9E%E6%B5%81%E9%87%8D%E6%8E%92">7.&#x91CD;&#x7ED8;&#xFF0C;&#x56DE;&#x6D41;(&#x91CD;&#x6392;)</a></li>
<li><a href="#8script-defer-%E5%92%8C-async-%E7%9A%84%E5%8C%BA%E5%88%AB">8.script defer &#x548C; async &#x7684;&#x533A;&#x522B;</a></li>
</ul>
</li>
<li><a href="#http">http</a>
<ul>
<li><a href="#1http-%E5%90%8E%E5%8F%B0-https-%E5%8C%BA%E5%88%AB">1.http &#x540E;&#x53F0; https &#x533A;&#x522B;</a></li>
<li><a href="#2post-%E5%92%8C-get-%E7%9A%84%E5%8C%BA%E5%88%AB">2.post &#x548C; get &#x7684;&#x533A;&#x522B;</a></li>
<li><a href="#3http-%E7%8A%B6%E6%80%81%E7%A0%81">3.http &#x72B6;&#x6001;&#x7801;</a></li>
<li><a href="#4tcp-%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B%E5%9B%9B%E6%AC%A1%E6%8C%A5%E6%89%8B">4.tcp &#x4E09;&#x6B21;&#x63E1;&#x624B;&#x56DB;&#x6B21;&#x6325;&#x624B;</a></li>
</ul>
</li>
<li><a href="#vue-httpswwwnowcodercomdiscuss622394typeallordertimepospage1channel-1source_idsearch_all_nctrack">vue  https://www.nowcoder.com/discuss/622394?type=all&amp;order=time&amp;pos=&amp;page=1&amp;channel=-1&amp;source_id=search_all_nctrack</a>
<ul>
<li><a href="#1vue-%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86">1.Vue &#x53CC;&#x5411;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x539F;&#x7406;</a></li>
<li><a href="#2%E4%BB%80%E4%B9%88%E6%98%AF-mvvm">2.&#x4EC0;&#x4E48;&#x662F; MVVM</a></li>
<li><a href="#3vuex-%E6%98%AF%E4%BB%80%E4%B9%88%E6%80%8E%E4%B9%88%E4%BD%BF%E7%94%A8%E5%93%AA%E7%A7%8D%E5%8A%9F%E8%83%BD%E5%9C%BA%E6%99%AF%E4%BD%BF%E7%94%A8%E5%AE%83">3.vuex &#x662F;&#x4EC0;&#x4E48;&#xFF1F;&#x600E;&#x4E48;&#x4F7F;&#x7528;&#xFF1F;&#x54EA;&#x79CD;&#x529F;&#x80FD;&#x573A;&#x666F;&#x4F7F;&#x7528;&#x5B83;&#xFF1F;</a></li>
<li><a href="#4v-if-%E5%92%8C-v-show-%E7%9A%84%E5%8C%BA%E5%88%AB">4.v-if &#x548C; v-show &#x7684;&#x533A;&#x522B;</a></li>
<li><a href="#5keep-aive-%E7%9A%84%E4%BD%9C%E7%94%A8">5.keep-aive &#x7684;&#x4F5C;&#x7528;</a></li>
<li><a href="#6vue-%E7%BB%84%E4%BB%B6%E9%97%B4%E4%BC%A0%E5%80%BC">6.vue &#x7EC4;&#x4EF6;&#x95F4;&#x4F20;&#x503C;</a></li>
<li><a href="#7vue-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9Fcreate-%E4%B8%8E-mounted-%E7%9A%84%E5%8C%BA%E5%88%AB">7.vue &#x751F;&#x547D;&#x5468;&#x671F;&#xFF0C;create &#x4E0E; mounted &#x7684;&#x533A;&#x522B;</a></li>
<li><a href="#8vue-%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0">8.vue &#x94A9;&#x5B50;&#x51FD;&#x6570;</a></li>
<li><a href="#9-%E5%85%A8%E5%B1%80%E8%BF%87%E6%BB%A4%E5%99%A8">9. &#x5168;&#x5C40;&#x8FC7;&#x6EE4;&#x5668;</a></li>
<li><a href="#10-%E5%85%A8%E5%B1%80%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4">10. &#x5168;&#x5C40;&#x81EA;&#x5B9A;&#x4E49;&#x6307;&#x4EE4;</a></li>
<li><a href="#11nexttick">11.nextTick</a></li>
<li><a href="#12vue-%E9%A6%96%E5%B1%8F%E7%99%BD%E5%B1%8F%E4%BC%98%E5%8C%96">12.vue &#x9996;&#x5C4F;&#x767D;&#x5C4F;&#x4F18;&#x5316;</a></li>
</ul>
</li>
<li><a href="#react">react</a>
<ul>
<li><a href="#1%E5%8C%BA%E5%88%86-real-dom-%E5%92%8C-virtual-dom">1.&#x533A;&#x5206; real DOM &#x548C; Virtual DOM</a></li>
<li><a href="#2%E4%B8%BA%E4%BB%80%E4%B9%88%E6%B5%8F%E8%A7%88%E5%99%A8%E6%97%A0%E6%B3%95%E8%AF%BB%E5%8F%96-jsx">2.&#x4E3A;&#x4EC0;&#x4E48;&#x6D4F;&#x89C8;&#x5668;&#x65E0;&#x6CD5;&#x8BFB;&#x53D6; JSX&#xFF1F;</a></li>
<li><a href="#3react-%E4%B8%AD%E7%9A%84%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6%E5%92%8C%E9%9D%9E%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6">3.react &#x4E2D;&#x7684;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x548C;&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;</a></li>
<li><a href="#4%E4%BB%80%E4%B9%88%E6%98%AF-react-%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6">4.&#x4EC0;&#x4E48;&#x662F; react &#x9AD8;&#x9636;&#x7EC4;&#x4EF6;</a></li>
<li><a href="#5%E4%BB%80%E4%B9%88%E6%98%AF-jsx">5.&#x4EC0;&#x4E48;&#x662F; JSX</a></li>
<li><a href="#6vue-%E5%92%8C-react-%E7%9A%84%E5%8C%BA%E5%88%AB">6.vue &#x548C; react &#x7684;&#x533A;&#x522B;</a></li>
<li><a href="#7render-hoc-%E5%92%8C-hooks-%E7%9A%84%E5%8C%BA%E5%88%AB">7.render hoc &#x548C; hooks &#x7684;&#x533A;&#x522B;</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 class="mume-header" id="js-%E5%9F%BA%E7%A1%80">js &#x57FA;&#x7840;</h2>

<h3 class="mume-header" id="1%E5%8E%9F%E5%9E%8B">1.&#x539F;&#x578B;</h3>

<ul>
<li>&#x4EFB;&#x4F55;&#x5BF9;&#x8C61;&#x90FD;&#x6709;&#x4E00;&#x4E2A;&#x539F;&#x578B;&#x5BF9;&#x8C61;&#xFF0C;&#x8FD9;&#x4E2A;&#x539F;&#x578B;&#x5BF9;&#x8C61;&#x7531;&#x5BF9;&#x8C61;&#x7684;&#x5185;&#x7F6E;&#x5C5E;&#x6027;<em>proto</em>&#x6307;&#x5411;&#x5B83;&#x7684;&#x6784;&#x9020;&#x51FD;&#x6570;&#x7684; prototype &#x6307;&#x5411;&#x7684;&#x5BF9;&#x8C61;&#xFF0C;&#x5373;&#x4EFB;&#x4F55;&#x5BF9;&#x8C61;&#x90FD;&#x662F;&#x7531;&#x4E00;&#x4E2A;&#x6784;&#x9020;&#x51FD;&#x6570;&#x521B;&#x5EFA;&#x7684;&#xFF0C;&#x4F46;&#x662F;&#x4E0D;&#x662F;&#x6BCF;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x90FD;&#x6709; prototype&#xFF0C;&#x53EA;&#x6709;&#x65B9;&#x6CD5;&#x624D;&#x6709; prototype&#x3002;</li>
</ul>
<h3 class="mume-header" id="2%E5%8E%9F%E5%9E%8B%E9%93%BE">2.&#x539F;&#x578B;&#x94FE;</h3>

<ul>
<li>&#x539F;&#x578B;&#x94FE;&#x7684;&#x6838;&#x5FC3;&#x5C31;&#x662F;&#x4F9D;&#x8D56;&#x5BF9;&#x8C61;&#x7684;<em>proto</em>&#x7684;&#x6307;&#x5411;&#xFF0C;&#x6309;&#x7167;&#x81EA;&#x8EAB;&#x5C5E;&#x6027;&#x2014;&gt;&#x6784;&#x9020;&#x51FD;&#x6570;&#x7684; prototype-&gt;Object &#x7684; prototype &#x7684;&#x987A;&#x5E8F;&#x67E5;&#x627E;&#x3002;</li>
</ul>
<h3 class="mume-header" id="3new-%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%BF%87%E7%A8%8B">3.new &#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x7684;&#x8FC7;&#x7A0B;</h3>

<ul>
<li>&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x65B0;&#x5BF9;&#x8C61;</li>
<li>this &#x6307;&#x5411;&#x8FD9;&#x4E2A;&#x65B0;&#x5BF9;&#x8C61;</li>
<li>&#x6267;&#x884C;&#x4EE3;&#x7801;&#xFF0C;&#x5373;&#x5BF9; this &#x8D4B;&#x503C;</li>
<li>&#x8FD4;&#x56DE; this</li>
</ul>
<h3 class="mume-header" id="4js-%E7%BB%A7%E6%89%BF">4.js &#x7EE7;&#x627F;</h3>

<ul>
<li>&#x539F;&#x578B;&#x94FE;&#x7EE7;&#x627F; &#x5C06;&#x7236;&#x7C7B;&#x7684;&#x5B9E;&#x4F8B;&#x4F5C;&#x4E3A;&#x5B50;&#x7C7B;&#x7684;&#x539F;&#x578B;</li>
<li>&#x6784;&#x9020;&#x7EE7;&#x627F; &#x590D;&#x5236;&#x7236;&#x7C7B;&#x7684;&#x5B9E;&#x4F8B;&#x5C5E;&#x6027;&#x7ED9;&#x5B50;&#x7C7B;(&#x6CA1;&#x7528;&#x5230;&#x539F;&#x578B;)</li>
<li>&#x5B9E;&#x4F8B;&#x7EE7;&#x627F; &#x4E3A;&#x7236;&#x7C7B;&#x5B9E;&#x4F8B;&#x6DFB;&#x52A0;&#x65B0;&#x7279;&#x6027;&#xFF0C;&#x4F5C;&#x4E3A;&#x5B50;&#x7C7B;&#x5B9E;&#x4F8B;&#x8FD4;&#x56DE;</li>
<li>&#x62F7;&#x8D1D;&#x7EE7;&#x627F; &#x628A;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x4E2D;&#x7684;&#x5C5E;&#x6027;&#x6216;&#x8005;&#x65B9;&#x6CD5;&#x76F4;&#x63A5;&#x590D;&#x5236;&#x5230;&#x53E6;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x4E2D;</li>
</ul>
<h3 class="mume-header" id="5bindcall-%E5%92%8C-apply-%E7%9A%84%E5%8C%BA%E5%88%AB">5.bind&#xFF0C;call &#x548C; apply &#x7684;&#x533A;&#x522B;</h3>

<ul>
<li>&#x4E09;&#x4E2A;&#x51FD;&#x6570;&#x90FD;&#x4F1A;&#x6539;&#x53D8; this &#x7684;&#x6307;&#x5411;</li>
<li>bind &#x4F1A;&#x4EA7;&#x751F;&#x65B0;&#x7684;&#x51FD;&#x6570;&#xFF0C;call &#x548C; apply &#x4E0D;&#x4F1A;&#x4EA7;&#x751F;&#x65B0;&#x7684;&#x51FD;&#x6570;</li>
<li>&#x7B2C;&#x4E00;&#x4E2A;&#x53C2;&#x6570;&#x90FD;&#x662F;&#x8981;&#x7ED1;&#x5B9A;&#x7684; this&#xFF0C;apply &#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#x662F;&#x6570;&#x7EC4;&#xFF0C;call &#x628A; apply &#x7684;&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#x5355;&#x5217;&#x51FA;&#x6765;&#x3002;</li>
</ul>
<h3 class="mume-header" id="6class-%E5%92%8C-es5-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%9A%84%E5%8C%BA%E5%88%AB">6.class &#x548C; es5 &#x6784;&#x9020;&#x51FD;&#x6570;&#x7684;&#x533A;&#x522B;</h3>

<ul>
<li>&#x7C7B;&#x7684;&#x5185;&#x90E8;&#x6240;&#x6709;&#x5B9A;&#x4E49;&#x7684;&#x65B9;&#x6CD5;&#xFF0C;&#x90FD;&#x662F;&#x4E0D;&#x53EF;&#x679A;&#x4E3E;&#x7684;(&#x4F46;&#x662F;&#x5728; es5 &#x4E2D; prototype &#x7684;&#x65B9;&#x6CD5;&#x662F;&#x53EF;&#x4EE5;&#x8FDB;&#x884C;&#x679A;&#x4E3E;&#x7684;)</li>
<li>&#x7C7B;&#x7684;&#x6784;&#x9020;&#x51FD;&#x6570;&#xFF0C;&#x4E0D;&#x4F7F;&#x7528; new &#x662F;&#x6CA1;&#x6CD5;&#x8C03;&#x7528;&#x7684;&#xFF0C;&#x4F1A;&#x62A5;&#x9519;&#x3002;&#x8FD9;&#x662F;&#x5B83;&#x8DDF;&#x666E;&#x901A;&#x6784;&#x9020;&#x51FD;&#x6570;&#x7684;&#x4E00;&#x4E2A;&#x4E3B;&#x8981;&#x533A;&#x522B;&#xFF0C;&#x540E;&#x8005;&#x4E0D;&#x7528; new &#x4E5F;&#x53EF;&#x4EE5;&#x6267;&#x884C;</li>
<li>Class &#x4E0D;&#x5B58;&#x5728;&#x53D8;&#x91CF;&#x63D0;&#x5347;(hoist)&#xFF0C;&#x8FD9;&#x4E00;&#x70B9;&#x4E0E; ES5 &#x5B8C;&#x5168;&#x4E0D;&#x540C;</li>
</ul>
<h3 class="mume-header" id="7%E9%97%AD%E5%8C%85%E5%92%8C%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%B9%B3%E6%97%B6%E5%93%AA%E4%BA%9B%E5%9C%B0%E6%96%B9%E7%94%A8%E5%88%B0%E8%BF%87%E9%97%AD%E5%8C%85">7.&#x95ED;&#x5305;&#x548C;&#x4F5C;&#x7528;&#x57DF;&#xFF0C;&#x5E73;&#x65F6;&#x54EA;&#x4E9B;&#x5730;&#x65B9;&#x7528;&#x5230;&#x8FC7;&#x95ED;&#x5305;&#xFF1F;</h3>

<ul>
<li>&#x95ED;&#x5305;&#x662F;&#x6307;&#x6709;&#x6743;&#x8BBF;&#x95EE;&#x53E6;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#x4F5C;&#x7528;&#x57DF;&#x4E2D;&#x7684;&#x53D8;&#x91CF;&#x7684;&#x51FD;&#x6570;&#x3002;</li>
<li>&#x4F5C;&#x7528;&#x57DF;&#xFF1A;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x3001;&#x5C40;&#x90E8;&#x53D8;&#x91CF;&#x3002;js &#x4E2D;&#x51FD;&#x6570;&#x5185;&#x90E8;&#x53EF;&#x4EE5;&#x8BFB;&#x53D6;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#xFF0C;&#x51FD;&#x6570;&#x5916;&#x90E8;&#x4E0D;&#x80FD;&#x8BFB;&#x53D6;&#x51FD;&#x6570;&#x5185;&#x90E8;&#x7684;&#x5C40;&#x90E8;&#x53D8;&#x91CF;&#x3002;</li>
<li>&#x5B50;&#x5BF9;&#x8C61;&#x4F1A;&#x4E00;&#x7EA7;&#x4E00;&#x7EA7;&#x5411;&#x4E0A;&#x5BFB;&#x627E;&#x6240;&#x6709;&#x7236;&#x5BF9;&#x8C61;&#x7684;&#x53D8;&#x91CF;&#x3002;</li>
</ul>
<h3 class="mume-header" id="8%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF">8.&#x4E8B;&#x4EF6;&#x5FAA;&#x73AF;</h3>

<ul>
<li>js &#x662F;&#x5355;&#x7EBF;&#x7A0B;&#xFF0C;&#x5206;&#x4E3A;&#x540C;&#x6B65;&#x4EFB;&#x52A1;&#x548C;&#x5F02;&#x6B65;&#x4EFB;&#x52A1;</li>
<li>&#x6240;&#x6709;&#x540C;&#x6B65;&#x4EFB;&#x52A1;&#x90FD;&#x5728;&#x4E3B;&#x7EBF;&#x7A0B;&#x4E0A;&#x6267;&#x884C;&#xFF0C;&#x5F62;&#x6210;&#x4E00;&#x4E2A;&#x6267;&#x884C;&#x6808;(execution context stack)&#x3002;</li>
<li>&#x4E3B;&#x7EBF;&#x7A0B;&#x4E4B;&#x5916;&#xFF0C;&#x8FD8;&#x5B58;&#x5728;&#x4E00;&#x4E2A;&quot;&#x4EFB;&#x52A1;&#x961F;&#x5217;&quot;(task queue)&#x3002;&#x53EA;&#x8981;&#x5F02;&#x6B65;&#x4EFB;&#x52A1;&#x6709;&#x4E86;&#x8FD0;&#x884C;&#x7ED3;&#x679C;&#xFF0C;&#x5C31;&#x5728;&quot;&#x4EFB;&#x52A1;&#x961F;&#x5217;&quot;&#x4E4B;&#x4E2D;&#x653E;&#x7F6E;&#x4E00;&#x4E2A;&#x4E8B;&#x4EF6;&#x3002;</li>
<li>&#x4E00;&#x65E6;&quot;&#x6267;&#x884C;&#x6808;&quot;&#x4E2D;&#x7684;&#x6240;&#x6709;&#x540C;&#x6B65;&#x4EFB;&#x52A1;&#x6267;&#x884C;&#x5B8C;&#x6BD5;&#xFF0C;&#x7CFB;&#x7EDF;&#x5C31;&#x4F1A;&#x8BFB;&#x53D6;&quot;&#x4EFB;&#x52A1;&#x961F;&#x5217;&quot;&#xFF0C;&#x770B;&#x770B;&#x91CC;&#x9762;&#x6709;&#x54EA;&#x4E9B;&#x4E8B;&#x4EF6;&#x3002;<br>
&#x90A3;&#x4E9B;&#x5BF9;&#x5E94;&#x7684;&#x5F02;&#x6B65;&#x4EFB;&#x52A1;&#xFF0C;&#x4E8E;&#x662F;&#x7ED3;&#x675F;&#x7B49;&#x5F85;&#x72B6;&#x6001;&#xFF0C;&#x8FDB;&#x5165;&#x6267;&#x884C;&#x6808;&#xFF0C;&#x5F00;&#x59CB;&#x6267;&#x884C;&#x3002;</li>
<li>&#x4E3B;&#x7EBF;&#x7A0B;&#x4E0D;&#x65AD;&#x91CD;&#x590D;&#x4E0A;&#x9762;&#x7684;&#x7B2C;&#x4E09;&#x6B65;&#x3002;<br>
&#x5B8F;&#x4EFB;&#x52A1;:&#x6574;&#x4F53;&#x4EE3;&#x7801; script setTimeout, setInterval, setImmediate, I/O, UI rendering<br>
&#x5FAE;&#x4EFB;&#x52A1;: Promises.(then catch finally), process.nextTick, MutationObserver</li>
</ul>
<h3 class="mume-header" id="9this-%E6%8C%87%E5%90%91">9.this &#x6307;&#x5411;</h3>

<ul>
<li>&#x4EE5;&#x51FD;&#x6570;&#x5F62;&#x5F0F;&#x8C03;&#x7528;&#x65F6;&#xFF0C;this &#x6C38;&#x8FDC;&#x90FD;&#x662F; window</li>
<li>&#x4EE5;&#x65B9;&#x6CD5;&#x7684;&#x5F62;&#x5F0F;&#x8C03;&#x7528;&#x65F6;&#xFF0C;this &#x662F;&#x8C03;&#x7528;&#x65B9;&#x6CD5;&#x7684;&#x5BF9;&#x8C61;</li>
<li>&#x4EE5;&#x6784;&#x9020;&#x51FD;&#x6570;&#x7684;&#x5F62;&#x5F0F;&#x8C03;&#x7528;&#x65F6;&#xFF0C;this &#x662F;&#x65B0;&#x521B;&#x5EFA;&#x7684;&#x90A3;&#x4E2A;&#x5BF9;&#x8C61;</li>
<li>&#x4F7F;&#x7528; call &#x548C; apply &#x8C03;&#x7528;&#x65F6;&#xFF0C;this &#x662F;&#x6307;&#x5B9A;&#x7684;&#x90A3;&#x4E2A;&#x5BF9;&#x8C61;
<ul>
<li>&#x7BAD;&#x5934;&#x51FD;&#x6570;&#xFF1A;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x7684; this &#x770B;&#x5916;&#x5C42;&#x662F;&#x5426;&#x6709;&#x51FD;&#x6570;,&#x5982;&#x679C;&#x6709;&#xFF0C;&#x5916;&#x5C42;&#x51FD;&#x6570;&#x7684; this &#x5C31;&#x662F;&#x5185;&#x90E8;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x7684; this,&#x5982;&#x679C;&#x6CA1;&#x6709;&#xFF0C;&#x5C31;&#x662F; window</li>
</ul>
</li>
</ul>
<h3 class="mume-header" id="10dts-%E6%96%87%E4%BB%B6%E7%9A%84%E4%BD%9C%E7%94%A8">10.d.ts &#x6587;&#x4EF6;&#x7684;&#x4F5C;&#x7528;</h3>

<ul>
<li>ts &#x662F;&#x7528; js &#x53D1;&#x5E03;&#xFF0C;TS &#x7684;&#x5927;&#x90E8;&#x5206;&#x6570;&#x636E;&#x7C7B;&#x578B;&#x90FD;&#x6CA1;&#x4E86;,&#x8BE5;&#x6587;&#x4EF6;&#x7528;&#x6765;&#x6807;&#x8BB0; js &#x5E93;&#x91CC;&#x5BF9;&#x8C61;&#x7684;&#x7C7B;&#x578B;</li>
</ul>
<h3 class="mume-header" id="11require-%E5%92%8C-import-%E7%9A%84%E5%8C%BA%E5%88%ABcommonjs-%E5%92%8C-es6-%E8%A7%84%E8%8C%83">11.require &#x548C; import &#x7684;&#x533A;&#x522B;(CommonJs &#x548C; es6 &#x89C4;&#x8303;)</h3>

<ul>
<li>require &#x662F; CommonJS &#x89C4;&#x8303;&#x7684;&#x6A21;&#x5757;&#x5316;&#x8BED;&#x6CD5;&#xFF0C;import &#x662F; es6 &#x89C4;&#x8303;&#x7684;&#x6A21;&#x5757;&#x5316;&#x8BED;&#x6CD5;&#xFF1B;<br>
CommonJs &#x5B9A;&#x4E49;&#x6BCF;&#x4E2A;&#x6587;&#x4EF6;&#x90FD;&#x662F;&#x4E00;&#x4E2A;&#x6A21;&#x5757;&#xFF0C;&#x5E76;&#x6709;&#x81EA;&#x5DF1;&#x7684;&#x4F5C;&#x7528;&#x57DF;&#xFF0C;&#x800C;&#x6BCF;&#x4E2A;&#x6587;&#x4EF6;&#x5B9A;&#x4E49;&#x7684;&#x53D8;&#x91CF;&#x3001;&#x51FD;&#x6570;&#x3001;&#x7C7B;&#xFF0C;&#x90FD;&#x662F;&#x79C1;&#x6709;&#x7684;&#xFF0C;&#x5BF9;&#x5176;&#x4ED6;&#x6A21;&#x5757;&#x4E0D;&#x53EF;&#x89C1;,<br>
&#x6A21;&#x5757;&#x7684; exports &#x5C5E;&#x6027;&#x662F;&#x5BF9;&#x5916;&#x7684;&#x63A5;&#x53E3;&#xFF0C;&#x53EA;&#x6709;&#x901A;&#x8FC7; module.exports &#x5BFC;&#x51FA;&#x7684;&#x5C5E;&#x6027;&#x624D;&#x80FD;&#x88AB;&#x52A0;&#x8F7D;&#x8BC6;&#x522B;&#x3002;</li>
<li>require &#x662F;&#x8FD0;&#x884C;&#x65F6;&#x52A0;&#x8F7D;,&#x6027;&#x80FD;&#x8F83;&#x4F4E;&#xFF1B;import &#x662F;&#x7F16;&#x8BD1;&#x65F6;&#x52A0;&#x8F7D;&#xFF0C;&#x6027;&#x80FD;&#x7A0D;&#x597D;</li>
<li>require &#x53EF;&#x4EE5;&#x5199;&#x5728;&#x4EE3;&#x7801;&#x7684;&#x4EFB;&#x610F;&#x4F4D;&#x7F6E;&#xFF0C;import &#x53EA;&#x80FD;&#x5199;&#x5728;&#x6587;&#x4EF6;&#x7684;&#x6700;&#x9876;&#x7AEF;&#x4E14;&#x4E0D;&#x53EF;&#x5728;&#x6761;&#x4EF6;&#x8BED;&#x53E5;&#x6216;&#x51FD;&#x6570;&#x4F5C;&#x7528;&#x57DF;&#x4E2D;&#x4F7F;&#x7528;&#xFF1B;</li>
<li>require &#x901A;&#x8FC7; module.exports &#x5BFC;&#x51FA;&#x7684;&#x503C;&#x5C31;&#x4E0D;&#x80FD;&#x518D;&#x53D8;&#x5316;&#xFF0C;import &#x901A;&#x8FC7; export &#x5BFC;&#x51FA;&#x7684;&#x503C;&#x53EF;&#x4EE5;&#x6539;&#x53D8;&#xFF1B;
<ul>
<li>require &#x901A;&#x8FC7; module.exports &#x5BFC;&#x51FA;&#x7684;&#x662F; exports &#x5BF9;&#x8C61;&#xFF0C;import &#x901A;&#x8FC7; export &#x5BFC;&#x51FA;&#x662F;&#x6307;&#x5B9A;&#x8F93;&#x51FA;&#x7684;&#x4EE3;&#x7801;&#xFF1B;<br>
CommonJS &#x6A21;&#x5757;&#x8F93;&#x51FA;&#x7684;&#x662F;&#x4E00;&#x4E2A;&#x503C;&#x7684;&#x62F7;&#x8D1D;&#xFF0C;ES6 &#x6A21;&#x5757;&#x8F93;&#x51FA;&#x7684;&#x662F;&#x503C;&#x7684;&#x5F15;&#x7528;</li>
</ul>
</li>
</ul>
<h3 class="mume-header" id="12var-let-const-%E7%9A%84%E5%8C%BA%E5%88%AB">12.var&#x3001;let&#x3001;const &#x7684;&#x533A;&#x522B;</h3>

<ul>
<li>var &#x58F0;&#x660E;&#x7684;&#x53D8;&#x91CF;&#x4F1A;&#x6302;&#x8F7D;&#x5728; window &#x4E0A;&#xFF0C;&#x800C; let &#x548C; const &#x58F0;&#x660E;&#x7684;&#x53D8;&#x91CF;&#x4E0D;&#x4F1A;&#xFF1A;</li>
<li>var &#x58F0;&#x660E;&#x53D8;&#x91CF;&#x5B58;&#x5728;&#x53D8;&#x91CF;&#x63D0;&#x5347;&#xFF0C;let &#x548C; const &#x4E0D;&#x5B58;&#x5728;&#x53D8;&#x91CF;&#x63D0;&#x5347;</li>
<li>let &#x548C; const &#x58F0;&#x660E;&#x5F62;&#x6210;&#x5757;&#x4F5C;&#x7528;&#x57DF;</li>
<li>&#x540C;&#x4E00;&#x4F5C;&#x7528;&#x57DF;&#x4E0B; let &#x548C; const &#x4E0D;&#x80FD;&#x58F0;&#x660E;&#x540C;&#x540D;&#x53D8;&#x91CF;&#xFF0C;&#x800C; var &#x53EF;&#x4EE5;
<ul>
<li>const &#x58F0;&#x660E;&#x7684;&#x662F;&#x5E38;&#x91CF;&#xFF0C;&#x5355;&#x4E00;&#x6570;&#x636E;&#x7C7B;&#x578B;&#x4E0D;&#x80FD;&#x4FEE;&#x6539;&#xFF0C;&#x5F15;&#x7528;&#x6570;&#x636E;&#x7C7B;&#x578B;&#x80FD;&#x4FEE;&#x6539;</li>
<li>&#x6682;&#x5B58;&#x6B7B;&#x533A;&#xFF0C;&#x5728;&#x5F53;&#x524D;&#x5757;&#x4F5C;&#x7528;&#x57DF;&#x4E2D;&#x5B58;&#x5728; a &#x4F7F;&#x7528; let/const &#x58F0;&#x660E;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x53EA;&#x4F1A;&#x5728;&#x5F53;&#x524D;&#x4F5C;&#x7528;&#x57DF;&#x627E;&#x53D8;&#x91CF;&#xFF0C;&#x5426;&#x5219;&#x4F1A;&#x62A5;&#x9519;</li>
</ul>
</li>
</ul>
<h3 class="mume-header" id="13%E7%AE%80%E8%BF%B0%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7">13.&#x7B80;&#x8FF0;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x7684;&#x65B0;&#x7279;&#x6027;</h3>

<ul>
<li>&#x4E0D;&#x80FD;&#x4F5C;&#x4E3A;&#x6784;&#x9020;&#x51FD;&#x6570;&#xFF0C;&#x548C; new &#x4E00;&#x8D77;&#x7528;&#x4F1A;&#x629B;&#x9519;</li>
<li>&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x6CA1;&#x6709;&#x539F;&#x578B;&#x5C5E;&#x6027;</li>
<li>&#x6CA1;&#x6709;&#x5B9A;&#x4E49; this &#x7ED1;&#x5B9A;&#xFF0C;&#x5916;&#x5C42;&#x6709;&#x51FD;&#x6570;&#x5219;&#x6307;&#x5411;&#x5916;&#x5C42;&#x51FD;&#x6570;&#x6307;&#x5411;&#xFF0C;&#x5426;&#x5219;&#x6307;&#x5411; window</li>
</ul>
<h3 class="mume-header" id="14asyncawait-%E5%92%8C-promise-%E7%9A%84%E5%8C%BA%E5%88%AB">14.async/await &#x548C; promise &#x7684;&#x533A;&#x522B;</h3>

<ul>
<li>Promise &#x662F; es6 &#x91CC;&#x7684;&#xFF0C;async/await &#x662F; es7</li>
<li>Promise &#x94FE;&#x5F0F;&#x64CD;&#x4F5C;&#xFF0C;&#x81EA;&#x5DF1; catch &#x5F02;&#x5E38;&#x3002;async &#x5219;&#x8981;&#x5728;&#x51FD;&#x6570;&#x5185; catch.</li>
<li>Promise.all/Promise.race &#x65B9;&#x6CD5;&#x3002;async/await &#x6CA1;&#x6709;&#x3002;</li>
<li>Async/await &#x8BA9;&#x4EE3;&#x7801;&#x770B;&#x8D77;&#x6765;&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x5B9E;&#x9645;&#x4E0A;&#x662F;&#x5F02;&#x6B65;&#xFF0C;promise &#x662F; then &#x56DE;&#x8C03;&#xFF0C;&#x524D;&#x8005;&#x5199;&#x6CD5;&#x66F4;&#x52A0;&#x6E05;&#x6670;&#x3002;</li>
</ul>
<h3 class="mume-header" id="15%E5%AF%B9-promise-%E7%9A%84%E7%90%86%E8%A7%A3">15.&#x5BF9; Promise &#x7684;&#x7406;&#x89E3;</h3>

<ul>
<li>Promise &#x7528;&#x6765;&#x89E3;&#x51B3;&#x5F02;&#x6B65;&#x56DE;&#x8C03;&#x95EE;&#x9898;&#xFF0C;&#x7531;&#x4E8E; js &#x662F;&#x5355;&#x7EBF;&#x7A0B;&#x7684;&#xFF0C;&#x5F88;&#x591A;&#x5F02;&#x6B65;&#x64CD;&#x4F5C;&#x90FD;&#x662F;&#x4F9D;&#x9760;&#x56DE;&#x8C03;&#x65B9;&#x6CD5;&#x5B9E;&#x73B0;&#x7684;&#xFF0C;&#x8FD9;&#x79CD;&#x505A;&#x6CD5;&#x5728;&#x903B;&#x8F91;&#x6BD4;&#x8F83;&#x590D;&#x6742;&#x7684;&#x56DE;&#x8C03;&#x5D4C;&#x5957;&#x4E2D;&#x4F1A;&#x76F8;&#x5F53;&#x590D;&#x6742;&#xFF1B;&#x4E5F;&#x53EB;&#x505A;&#x56DE;&#x8C03;&#x5730;&#x72F1;&#xFF1B;</li>
<li>promise &#x7528;&#x6765;&#x5C06;&#x8FD9;&#x79CD;&#x7E41;&#x6742;&#x7684;&#x505A;&#x6CD5;&#x7B80;&#x5316;&#xFF0C;&#x8BA9;&#x7A0B;&#x5E8F;&#x66F4;&#x5177;&#x5907;&#x53EF;&#x8BFB;&#x6027;&#xFF0C;&#x53EF;&#x7EF4;&#x62A4;&#x6027;&#xFF1B;romise &#x5185;&#x90E8;&#x6709;&#x4E09;&#x79CD;&#x72B6;&#x6001;&#xFF0C;pedding&#xFF0C;fulfilled&#xFF0C;rejected&#xFF1B;pedding &#x8868;&#x793A;&#x7A0B;&#x5E8F;&#x6B63;&#x5728;&#x6267;&#x884C;&#x4F46;&#x672A;&#x5F97;&#x5230;&#x7ED3;&#x679C;&#xFF0C;&#x5373;&#x5F02;&#x6B65;&#x64CD;&#x4F5C;&#x6CA1;&#x6709;&#x6267;&#x884C;&#x5B8C;&#x6BD5;&#xFF0C;fulfilled &#x8868;&#x793A;&#x7A0B;&#x5E8F;&#x6267;&#x884C;&#x5B8C;&#x6BD5;&#xFF0C;&#x4E14;&#x6267;&#x884C;&#x6210;&#x529F;&#xFF0C;rejected &#x8868;&#x793A;&#x6267;&#x884C;&#x5B8C;&#x6BD5;&#x4F46;&#x5931;&#x8D25;&#xFF1B;</li>
<li>promise &#x4E2D;&#x7684; then &#x4E00;&#x822C;&#x5BF9;&#x5E94;&#x6210;&#x529F;&#x540E;&#x7684;&#x6570;&#x636E;&#x5904;&#x7406;&#xFF0C;catch &#x4E00;&#x822C;&#x5BF9;&#x5E94;&#x5931;&#x8D25;&#x540E;&#x7684;&#x6570;&#x636E;&#x5904;&#x7406;&#x3002;Promise &#x72B6;&#x6001;&#x4E00;&#x65E6;&#x786E;&#x5B9A;&#xFF0C;&#x5C31;&#x4E0D;&#x4F1A;&#x518D;&#x6B21;&#x53D1;&#x751F;&#x6539;&#x53D8;&#x3002;</li>
</ul>
<h3 class="mume-header" id="16js-%E4%B8%AD%E7%9A%84%E6%B7%B1%E5%85%8B%E9%9A%86%E5%92%8C%E6%B5%85%E5%85%8B%E9%9A%86">16.js &#x4E2D;&#x7684;&#x6DF1;&#x514B;&#x9686;&#x548C;&#x6D45;&#x514B;&#x9686;</h3>

<ul>
<li>&#x5F15;&#x7528;&#x578B;&#x53D8;&#x91CF;&#x4FDD;&#x5B58;&#x7684;&#x662F;&#x5185;&#x5B58;&#x5730;&#x5740;&#xFF0C;
<ul>
<li>&#x6D45;&#x514B;&#x9686;&#xFF1A;&#x64CD;&#x4F5C;&#x7684;&#x540C;&#x4E00;&#x5757;&#x5185;&#x5B58;&#x5BFC;&#x81F4;&#x65B0;&#x53D8;&#x91CF;&#x548C;&#x8001;&#x53D8;&#x91CF;&#x7684;&#x503C;&#x4FDD;&#x6301;&#x4E00;&#x81F4;</li>
<li>&#x6DF1;&#x514B;&#x9686;&#xFF1A;&#x91CD;&#x65B0;&#x5F00;&#x8F9F;&#x5185;&#x5B58;&#x7A7A;&#x95F4;&#xFF0C;&#x6539;&#x53D8;&#x65B0;&#x53D8;&#x91CF;&#x7684;&#x503C;&#x4E0D;&#x4F1A;&#x5F71;&#x54CD;&#x8001;&#x53D8;&#x91CF;<br>
&#x6DF1;&#x514B;&#x9686;&#x65B9;&#x6CD5;&#xFF1A;
<ul>
<li>&#x91C7;&#x7528;&#x904D;&#x5386;&#x5BF9;&#x8C61;(for in)&#x7684;&#x65B9;&#x5F0F;&#xFF0C;&#x5982;&#x679C;&#x65B0;&#x53D8;&#x91CF;&#x7684; value &#x8FD8;&#x662F;&#x4E3A;&#x5F15;&#x7528;&#x7C7B;&#x578B;&#x5219;&#x9012;-&#x5F52;&#x8C03;&#x7528;&#x8BE5;&#x51FD;&#x6570;<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token keyword">function</span> <span class="token function">_clone</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>obj <span class="token operator">===</span> <span class="token keyword null nil">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword control-flow">return</span> <span class="token keyword null nil">null</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>obj <span class="token keyword">instanceof</span> <span class="token class-name">Array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword control-flow">return</span> obj<span class="token punctuation">.</span><span class="token method function property-access">slice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> newObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> obj<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">!==</span> <span class="token string">&quot;object&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        newObj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
        newObj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">_clone</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword control-flow">return</span> newObj<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</pre></li>
<li>JSON.parse(JSON.stringify(arr))</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 class="mume-header" id="17js-%E4%B8%AD%E7%9A%84%E5%A0%86%E5%92%8C%E6%A0%88">17.js &#x4E2D;&#x7684;&#x5806;&#x548C;&#x6808;</h3>

<ul>
<li>&#x6808;(stack): &#x7531;&#x64CD;&#x4F5C;&#x7CFB;&#x7EDF;&#x81EA;&#x52A8;&#x5206;&#x914D;&#x5185;&#x5B58;&#x7A7A;&#x95F4;&#xFF0C;&#x81EA;&#x52A8;&#x91CA;&#x653E;&#xFF0C;&#x5B58;&#x50A8;&#x7684;&#x662F;&#x57FA;&#x7840;&#x53D8;&#x91CF;&#x4EE5;&#x53CA;&#x4E00;&#x4E9B;&#x5BF9;&#x8C61;&#x7684;&#x5F15;&#x7528;&#x53D8;&#x91CF;&#xFF0C;&#x5360;&#x636E;&#x56FA;&#x5B9A;&#x5927;&#x5C0F;&#x7684;&#x7A7A;&#x95F4;&#x3002;Number Boolean undefined Object String Null &#xFF1B;(es6&#xFF1A;Symbol)(es2020&#xFF1A;bigInt)</li>
<li>&#x5806;(heap)&#xFF1A;&#x7531;&#x64CD;&#x4F5C;&#x7CFB;&#x7EDF;&#x52A8;&#x6001;&#x5206;&#x914D;&#x7684;&#x5185;&#x5B58;&#xFF0C;&#x5927;&#x5C0F;&#x4E0D;&#x5B9A;&#x4E5F;&#x4E0D;&#x4F1A;&#x81EA;&#x52A8;&#x91CA;&#x653E;&#xFF0C;&#x4E00;&#x822C;&#x7531;&#x7A0B;&#x5E8F;&#x5458;&#x5206;&#x914D;&#x91CA;&#x653E;&#xFF0C;&#x4E5F;&#x53EF;&#x7531;&#x5783;&#x573E;&#x56DE;&#x6536;&#x673A;&#x5236;&#x56DE;&#x6536;&#x3002; Object Function Array</li>
</ul>
<h3 class="mume-header" id="18%E4%BD%BF%E7%94%A8-es6-%E5%A6%82%E4%BD%95%E5%90%88%E5%B9%B6%E5%A4%9A%E4%B8%AA%E5%AF%B9%E8%B1%A1%E5%A4%8D%E5%88%B6%E5%AF%B9%E8%B1%A1">18.&#x4F7F;&#x7528; ES6 &#x5982;&#x4F55;&#x5408;&#x5E76;&#x591A;&#x4E2A;&#x5BF9;&#x8C61;&#xFF0C;&#x590D;&#x5236;&#x5BF9;&#x8C61;</h3>

<ul>
<li>(...)&#x62D3;&#x5C55;&#x8FD0;&#x7B97;&#x7B26;</li>
<li>&#x6D45;&#x62F7;&#x8D1D;&#xFF1A;Object.assign(target, source1&#xFF0C;source2&#xFF0C;source3&#xFF0C; &#xB7;&#xB7;&#xB7;)</li>
</ul>
<h2 class="mume-header" id="%E6%B5%8F%E8%A7%88%E5%99%A8">&#x6D4F;&#x89C8;&#x5668;</h2>

<h3 class="mume-header" id="1%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98">1.&#x6D4F;&#x89C8;&#x5668;&#x7F13;&#x5B58;</h3>

<ul>
<li>&#x5F3A;&#x5236;&#x7F13;&#x5B58;&#xFF1A;&#x6D4F;&#x89C8;&#x5668;&#x5728;&#x52A0;&#x8F7D;&#x8D44;&#x6E90;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4F1A;&#x5148;&#x6839;&#x636E;&#x672C;&#x5730;&#x7F13;&#x5B58;&#x8D44;&#x6E90;&#x7684; header &#x4E2D;&#x7684;&#x4FE1;&#x606F;(Expires &#x548C; Cache-Control)&#x6765;&#x5224;&#x65AD;&#x662F;&#x5426;&#x9700;&#x8981;&#x5F3A;&#x5236;&#x7F13;&#x5B58;&#x3002;&#x5982;&#x679C;&#x547D;&#x4E2D;&#x7684;&#x8BDD;&#xFF0C;&#x5219;&#x4F1A;&#x76F4;&#x63A5;&#x4F7F;&#x7528;&#x7F13;&#x5B58;&#x4E2D;&#x7684;&#x8D44;&#x6E90;&#x3002;&#x5426;&#x5219;&#x7684;&#x8BDD;&#xFF0C;&#x4F1A;&#x7EE7;&#x7EED;&#x5411;&#x670D;&#x52A1;&#x5668;&#x53D1;&#x9001;&#x8BF7;&#x6C42;&#x3002;</li>
<li>expires:&#x8FC7;&#x671F;&#x65F6;&#x95F4;</li>
<li>cache-control:
<ul>
<li>&#x9700;&#x8981;&#x534F;&#x5546;&#x7F13;&#x5B58;&#xFF0C;&#x53D1;&#x9001;&#x8BF7;&#x6C42;&#x5230;&#x670D;&#x52A1;&#x5668;&#x786E;&#x8BA4;&#x662F;&#x5426;&#x4F7F;&#x7528;&#x7F13;&#x5B58;&#x3002;</li>
<li>&#x7981;&#x6B62;&#x7F13;&#x5B58;,&#x6BCF;&#x4E00;&#x6B21;&#x90FD;&#x8981;&#x91CD;&#x65B0;&#x8BF7;&#x6C42;&#x6570;&#x636E;&#x3002;</li>
<li>&#x53EF;&#x4EE5;&#x88AB;&#x6240;&#x6709;&#x7528;&#x6237;&#x7F13;&#x5B58;&#xFF0C;&#x5305;&#x62EC;&#x7EC8;&#x7AEF;&#x7528;&#x6237;&#x548C; CDN &#x7B49;&#x4E2D;&#x95F4;&#x4EE3;&#x7406;&#x670D;&#x52A1;&#x5668;&#x3002;</li>
<li>&#x53EA;&#x80FD;&#x88AB;&#x7EC8;&#x7AEF;&#x7528;&#x6237;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x7F13;&#x5B58;&#xFF0C;&#x4E0D;&#x5141;&#x8BB8; CDN &#x7B49;&#x4E2D;&#x7EE7;&#x7F13;&#x5B58;&#x670D;&#x52A1;&#x5668;&#x5BF9;&#x5176;&#x7F13;&#x5B58;&#x3002;</li>
</ul>
</li>
<li>Cache-Control &#x4E0E; Expires &#x53EF;&#x4EE5;&#x5728;&#x670D;&#x52A1;&#x7AEF;&#x914D;&#x7F6E;&#x540C;&#x65F6;&#x542F;&#x7528;&#xFF0C;&#x540C;&#x65F6;&#x542F;&#x7528;&#x7684;&#x65F6;&#x5019; Cache-Control &#x4F18;&#x5148;&#x7EA7;&#x9AD8;&#x3002;</li>
<li>&#x534F;&#x5546;&#x7F13;&#x5B58;&#xFF1A;&#x5C31;&#x662F;&#x5F3A;&#x5236;&#x7F13;&#x5B58;&#x5931;&#x6548;&#x540E;&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x643A;&#x5E26;&#x7F13;&#x5B58;&#x6807;&#x8BC6;&#x5411;&#x670D;&#x52A1;&#x5668;&#x53D1;&#x8D77;&#x8BF7;&#x6C42;&#xFF0C;&#x7531;&#x670D;&#x52A1;&#x5668;&#x6839;&#x636E;&#x7F13;&#x5B58;&#x6807;&#x8BC6;&#x51B3;&#x5B9A;&#x662F;&#x5426;&#x4F7F;&#x7528;&#x7F13;&#x5B58;&#x7684;&#x8FC7;&#x7A0B;&#xFF0C;&#x7F13;&#x5B58;&#x6807;&#x8BC6;&#x547D;&#x4E2D;&#x8BFB;&#x53D6;&#x7F13;&#x5B58;&#x8FD4;&#x56DE; 304&#xFF0C;&#x5426;&#x5219;&#x91CD;&#x65B0;&#x8BF7;&#x6C42;&#x8FD4;&#x56DE; 200</li>
</ul>
<h3 class="mume-header" id="2%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AD%98%E5%82%A8">2.&#x6D4F;&#x89C8;&#x5668;&#x5B58;&#x50A8;</h3>

<p>cookie,localStorrage,seesionStorage,websql(&#x5E9F;&#x5F03;),indexdb</p>
<h3 class="mume-header" id="3%E8%B7%A8%E5%9F%9F">3.&#x8DE8;&#x57DF;</h3>

<p>&#x540C;&#x6E90;&#x7B56;&#x7565;:&quot;&#x534F;&#x8BAE;+&#x57DF;&#x540D;+&#x7AEF;&#x53E3;&quot;&#x4E09;&#x8005;&#x76F8;&#x540C;,&#x4E09;&#x8005;&#x4EFB;&#x4F55;&#x4E00;&#x8005;&#x4E0D;&#x540C;&#x4EA7;&#x751F;&#x8DE8;&#x57DF;<br>
&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF1A;jsonp nginx &#x53CD;&#x5411;&#x4EE3;&#x7406;(&#x63A5;&#x53E3;&#x8F6C;&#x53D1;) &#x670D;&#x52A1;&#x7AEF;&#x8BBE;&#x7F6E;&#x5141;&#x8BB8;&#x8BF7;&#x6C42;&#x5934;&#x4E3A;&#x6307;&#x5B9A;&#x57DF;&#x540D;&#x6216;&#x8005;*</p>
<h3 class="mume-header" id="4%E5%89%8D%E7%AB%AF%E5%AE%89%E5%85%A8">4.&#x524D;&#x7AEF;&#x5B89;&#x5168;</h3>

<ul>
<li>XSS &#x8DE8;&#x7AD9;&#x811A;&#x672C;&#x653B;&#x51FB;(&#x6076;&#x610F;&#x653B;&#x51FB;&#x8005;&#x5F80; Web &#x9875;&#x9762;&#x91CC;&#x63D2;&#x5165;&#x6076;&#x610F; html &#x4EE3;&#x7801;&#xFF0C;&#x5F53;&#x7528;&#x6237;&#x6D4F;&#x89C8;&#x8BE5;&#x9875;&#x4E4B;&#x65F6;&#xFF0C;&#x5D4C;&#x5165;&#x5176;&#x4E2D; Web &#x91CC;&#x9762;&#x7684; html &#x4EE3;&#x7801;&#x4F1A;&#x88AB;&#x6267;&#x884C;&#xFF0C;&#x4ECE;&#x800C;&#x8FBE;&#x5230;&#x6076;&#x610F;&#x653B;&#x51FB;&#x7528;&#x6237;&#x7684;&#x7279;&#x6B8A;&#x76EE;&#x7684;&#x3002;)
<ul>
<li>&#x8F6C;&#x4E49;&#x5B57;&#x7B26;</li>
<li>&#x8BBE;&#x7F6E; HTTP Header &#x4E2D;&#x7684; Content-Security-Policy</li>
<li>&#x9488;&#x5BF9;&#x6027;&#x7684;&#x5BF9; cookie &#x52A0;&#x5F3A;&#x63A7;&#x5236;&#xFF0C;&#x8BBE;&#x7F6E; http-only,&#x8FD9;&#x6837; js &#x5C31;&#x83B7;&#x53D6;&#x4E0D;&#x5230; cookie &#x7684;&#x5185;&#x5BB9;&#x3002;</li>
</ul>
</li>
<li>CSRF &#x8DE8;&#x7AD9;&#x8BF7;&#x6C42;&#x4F2A;&#x9020; (&#x5229;&#x7528;&#x7F51;&#x7AD9;&#x5BF9;&#x7528;&#x6237;&#x6807;&#x8BC6;&#x7684;&#x4FE1;&#x4EFB;&#xFF0C;&#x6B3A;&#x9A97;&#x7528;&#x6237;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x53D1;&#x9001; HTTP &#x8BF7;&#x6C42;&#x7ED9;&#x76EE;&#x6807;&#x7AD9;&#x70B9;)
<ul>
<li>&#x8BBE;&#x7F6E;&#x989D;&#x5916;&#x7684;&#x9A8C;&#x8BC1;&#x7801;&#x3001;&#x5BC6;&#x7801;&#x3001;&#x6307;&#x7EB9;&#x9A8C;&#x8BC1;</li>
<li>get &#x6539; post</li>
<li>token &#x7684;&#x65F6;&#x6548;&#x6027;</li>
</ul>
</li>
<li>&#x70B9;&#x51FB;&#x52AB;&#x6301;(&#x901A;&#x8FC7;&#x900F;&#x660E;&#x7684; iframe &#x8BF1;&#x5BFC;&#x7528;&#x6237;)
<ul>
<li>&#x7981;&#x6B62;&#x5185;&#x5D4C;</li>
</ul>
</li>
</ul>
<h3 class="mume-header" id="5%E6%B5%8F%E8%A7%88%E5%99%A8%E5%9C%B0%E5%9D%80%E6%A0%8F%E8%BE%93%E5%85%A5-url-%E5%88%B0%E6%98%BE%E7%A4%BA%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%AD%A5%E9%AA%A4">5.&#x6D4F;&#x89C8;&#x5668;&#x5730;&#x5740;&#x680F;&#x8F93;&#x5165; url &#x5230;&#x663E;&#x793A;&#x9875;&#x9762;&#x7684;&#x6B65;&#x9AA4;</h3>

<ul>
<li>&#x6D4F;&#x89C8;&#x5668;&#x6839;&#x636E;&#x8BF7;&#x6C42;&#x7684; URL &#x4EA4;&#x7ED9; DNS &#x57DF;&#x540D;&#x89E3;&#x6790;&#xFF0C;&#x627E;&#x5230;&#x771F;&#x5B9E; IP&#xFF0C;&#x5411;&#x670D;&#x52A1;&#x5668;&#x53D1;&#x8D77;&#x8BF7;&#x6C42;&#xFF1B;</li>
<li>&#x670D;&#x52A1;&#x5668;&#x4EA4;&#x7ED9;&#x540E;&#x53F0;&#x5904;&#x7406;&#x5B8C;&#x6210;&#x540E;&#x8FD4;&#x56DE;&#x6570;&#x636E;&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x63A5;&#x6536;&#x6587;&#x4EF6;(HTML&#x3001;JS&#x3001;CSS&#x3001;&#x56FE;&#x50CF;&#x7B49;)&#xFF1B;</li>
<li>&#x6D4F;&#x89C8;&#x5668;&#x5BF9;&#x52A0;&#x8F7D;&#x5230;&#x7684;&#x8D44;&#x6E90;(HTML&#x3001;JS&#x3001;CSS &#x7B49;)&#x8FDB;&#x884C;&#x8BED;&#x6CD5;&#x89E3;&#x6790;&#xFF0C;&#x5EFA;&#x7ACB;&#x76F8;&#x5BF9;&#x5E94;&#x7684;&#x5185;&#x90E8;&#x6570;&#x636E;&#x7ED3;&#x6784;(&#x5982; HTML &#x7684; DOM)&#xFF1B;</li>
<li>&#x8F7D;&#x5165;&#x89E3;&#x6790;&#x5230;&#x7684;&#x8D44;&#x6E90;&#x6587;&#x4EF6;&#xFF0C;&#x6E32;&#x67D3;&#x9875;&#x9762;&#xFF0C;&#x5B8C;&#x6210;&#x3002;</li>
</ul>
<h3 class="mume-header" id="6%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E7%9A%84%E6%AD%A5%E9%AA%A4">6.&#x6D4F;&#x89C8;&#x5668;&#x6E32;&#x67D3;&#x7684;&#x6B65;&#x9AA4;</h3>

<ul>
<li>HTML &#x89E3;&#x6790;&#x51FA; DOM Tree</li>
<li>CSS &#x89E3;&#x6790;&#x51FA; Style Rules</li>
<li>&#x4E24;&#x8005;&#x5173;&#x8054;&#x751F;&#x6210; Render Tree</li>
<li>Layout(&#x5E03;&#x5C40;)&#x6839;&#x636E; Render Tree &#x8BA1;&#x7B97;&#x6BCF;&#x4E2A;&#x8282;&#x70B9;&#x7684;&#x4FE1;&#x606F;</li>
<li>&#x6D4F;&#x89C8;&#x5668;&#x6839;&#x636E;&#x8BA1;&#x7B97;&#x597D;&#x7684;&#x4FE1;&#x606F;&#x8FDB;&#x884C;&#x6E32;&#x67D3;&#x6574;&#x4E2A;&#x9875;&#x9762;</li>
</ul>
<h3 class="mume-header" id="7%E9%87%8D%E7%BB%98%E5%9B%9E%E6%B5%81%E9%87%8D%E6%8E%92">7.&#x91CD;&#x7ED8;&#xFF0C;&#x56DE;&#x6D41;(&#x91CD;&#x6392;)</h3>

<ul>
<li>&#x91CD;&#x7ED8;&#xFF1A;&#x5916;&#x89C2;&#x6539;&#x53D8;&#xFF0C;color background-color border-color</li>
<li>&#x56DE;&#x6D41;(&#x91CD;&#x6392;)&#xFF1A;&#x6DFB;&#x52A0;&#x3001;&#x5220;&#x9664;&#x53EF;&#x89C1;&#x7684; dom
<ul>
<li>&#x5143;&#x7D20;&#x7684;&#x4F4D;&#x7F6E;&#x6539;&#x53D8;</li>
<li>&#x5143;&#x7D20;&#x7684;&#x5C3A;&#x5BF8;&#x6539;&#x53D8;(&#x5916;&#x8FB9;&#x8DDD;&#x3001;&#x5185;&#x8FB9;&#x8DDD;&#x3001;&#x8FB9;&#x6846;&#x539A;&#x5EA6;&#x3001;&#x5BBD;&#x9AD8;&#x3001;&#x7B49;&#x51E0;&#x4F55;&#x5C5E;&#x6027;)</li>
<li>&#x9875;&#x9762;&#x6E32;&#x67D3;&#x521D;&#x59CB;&#x5316;</li>
<li>&#x6D4F;&#x89C8;&#x5668;&#x7A97;&#x53E3;&#x5C3A;&#x5BF8;&#x6539;&#x53D8;</li>
</ul>
</li>
</ul>
<h3 class="mume-header" id="8script-defer-%E5%92%8C-async-%E7%9A%84%E5%8C%BA%E5%88%AB">8.script defer &#x548C; async &#x7684;&#x533A;&#x522B;</h3>

<ul>
<li>async(&#x5F02;&#x6B65;&#x811A;&#x672C;)&#xFF1A;&#x6587;&#x6863;&#x7684;&#x52A0;&#x8F7D;&#x548C;&#x6E32;&#x548C; js &#x7684;&#x52A0;&#x8F7D;&#x548C;&#x6267;&#x884C;&#x662F;&#x5E76;&#x884C;&#x7684;(&#x7ACB;&#x5373;&#x4E0B;&#x8F7D;&#x5E76;&#x6267;&#x884C;)</li>
<li>defer(&#x5EF6;&#x8FDF;&#x811A;&#x672C;)&#xFF1A;&#x6587;&#x6863;&#x7684;&#x52A0;&#x8F7D;&#x548C;&#x6E32;&#x548C; js &#x7684;&#x52A0;&#x8F7D;&#xFF0C;&#x6267;&#x884C;&#x8981;&#x7B49;&#x6587;&#x6863;&#x6240;&#x6709;&#x5143;&#x7D20;&#x89E3;&#x6790;&#x5B8C;(&#x7ACB;&#x5373;&#x4E0B;&#x8F7D;&#x5EF6;&#x8FDF;&#x6267;&#x884C;)</li>
</ul>
<h2 class="mume-header" id="http">http</h2>

<h3 class="mume-header" id="1http-%E5%90%8E%E5%8F%B0-https-%E5%8C%BA%E5%88%AB">1.http &#x540E;&#x53F0; https &#x533A;&#x522B;</h3>

<ul>
<li>HTTPS &#x9700;&#x8981;&#x5230; ca &#x673A;&#x6784;&#x7533;&#x8BF7;&#x8BC1;&#x4E66;&#x3002;</li>
<li>HTTP &#x662F;&#x8D85;&#x6587;&#x672C;&#x4F20;&#x8F93;&#x534F;&#x8BAE;&#xFF0C;&#x4FE1;&#x606F;&#x662F;&#x660E;&#x6587;&#x4F20;&#x8F93;&#xFF0C;HTTPS &#x5219;&#x662F;&#x5177;&#x6709;&#x5B89;&#x5168;&#x6027;&#x7684; SSL &#x52A0;&#x5BC6;&#x4F20;&#x8F93;&#x534F;&#x8BAE;&#x3002;</li>
<li>HTTP &#x548C; HTTPS &#x4F7F;&#x7528;&#x7684;&#x662F;&#x5B8C;&#x5168;&#x4E0D;&#x540C;&#x7684;&#x8FDE;&#x63A5;&#x65B9;&#x5F0F;&#xFF0C;&#x7528;&#x7684;&#x7AEF;&#x53E3;&#x4E5F;&#x4E0D;&#x4E00;&#x6837;&#xFF0C;&#x524D;&#x8005;&#x662F; 80&#xFF0C;&#x540E;&#x8005;&#x662F; 443&#x3002;</li>
<li>HTTP &#x7684;&#x8FDE;&#x63A5;&#x5F88;&#x7B80;&#x5355;&#xFF0C;&#x662F;&#x65E0;&#x72B6;&#x6001;&#x7684;&#x3002;HTTPS &#x534F;&#x8BAE;&#x662F;&#x7531; SSL+HTTP &#x534F;&#x8BAE;&#x6784;&#x5EFA;&#x7684;&#x53EF;&#x8FDB;&#x884C;&#x52A0;&#x5BC6;&#x4F20;&#x8F93;&#x3001;&#x8EAB;&#x4EFD;&#x8BA4;&#x8BC1;&#x7684;&#x7F51;&#x7EDC;&#x534F;&#x8BAE;&#xFF0C;&#x6BD4; HTTP &#x534F;&#x8BAE;&#x5B89;&#x5168;&#x3002;</li>
</ul>
<h3 class="mume-header" id="2post-%E5%92%8C-get-%E7%9A%84%E5%8C%BA%E5%88%AB">2.post &#x548C; get &#x7684;&#x533A;&#x522B;</h3>

<ul>
<li>GET &#x5728;&#x6D4F;&#x89C8;&#x5668;&#x56DE;&#x9000;&#x65F6;&#x662F;&#x65E0;&#x5BB3;&#x7684;&#xFF0C;&#x800C; POST &#x4F1A;&#x518D;&#x6B21;&#x63D0;&#x4EA4;&#x8BF7;&#x6C42;&#x3002;</li>
<li>GET &#x8BF7;&#x6C42;&#x4F1A;&#x88AB;&#x6D4F;&#x89C8;&#x5668;&#x4E3B;&#x52A8; cache&#xFF0C;&#x800C; POST &#x4E0D;&#x4F1A;&#xFF0C;&#x9664;&#x975E;&#x624B;&#x52A8;&#x8BBE;&#x7F6E;&#x3002;</li>
<li>GET &#x53C2;&#x6570;&#x901A;&#x8FC7; URL &#x4F20;&#x9012;&#xFF0C;POST &#x653E;&#x5728; Request body &#x4E2D;&#x3002;</li>
<li>GET &#x8BF7;&#x6C42;&#x5728; URL &#x4E2D;&#x4F20;&#x9001;&#x7684;&#x53C2;&#x6570;&#x662F;&#x6709;&#x957F;&#x5EA6;&#x9650;&#x5236;&#x7684;&#xFF0C;&#x800C; POST &#x4E48;&#x6709;&#x3002;</li>
<li>&#x5BF9;&#x53C2;&#x6570;&#x7684;&#x6570;&#x636E;&#x7C7B;&#x578B;&#xFF0C;GET &#x53EA;&#x63A5;&#x53D7; ASCII &#x5B57;&#x7B26;&#xFF0C;&#x800C; POST &#x6CA1;&#x6709;&#x9650;&#x5236;&#x3002;</li>
<li>GET &#x6BD4; POST &#x66F4;&#x4E0D;&#x5B89;&#x5168;&#xFF0C;&#x56E0;&#x4E3A;&#x53C2;&#x6570;&#x76F4;&#x63A5;&#x66B4;&#x9732;&#x5728; URL &#x4E0A;&#xFF0C;&#x6240;&#x4EE5;&#x4E0D;&#x80FD;&#x7528;&#x6765;&#x4F20;&#x9012;&#x654F;&#x611F;&#x4FE1;&#x606F;&#x3002;</li>
<li>HTTP &#x7684;&#x5E95;&#x5C42;&#x662F; TCP/IP&#x3002;&#x6240;&#x4EE5; GET &#x548C; POST &#x7684;&#x5E95;&#x5C42;&#x4E5F;&#x662F; TCP/IP&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x8BF4;&#xFF0C;GET/POST &#x90FD;&#x662F; TCP &#x94FE;&#x63A5;&#x3002;GET &#x548C; POST &#x80FD;&#x505A;&#x7684;&#x4E8B;&#x60C5;&#x662F;&#x4E00;&#x6837;&#x7684;&#x3002;&#x7ED9; GET &#x52A0;&#x4E0A; request body&#xFF0C;&#x6216;&#x8005; POST &#x5E26;&#x4E0A; url &#x53C2;&#x6570;&#xFF0C;&#x6280;&#x672F;&#x4E0A;&#x662F;&#x5B8C;&#x5168;&#x884C;&#x7684;&#x901A;&#x7684;&#x3002; &#x7531;&#x4E8E; HTTP &#x7684;&#x89C4;&#x5B9A;&#x548C;&#x6D4F;&#x89C8;&#x5668;/&#x670D;&#x52A1;&#x5668;&#x7684;&#x9650;&#x5236;&#xFF0C;&#x5BFC;&#x81F4;&#x4ED6;&#x4EEC;&#x5728;&#x5E94;&#x7528;&#x8FC7;&#x7A0B;&#x4E2D;&#x4F53;&#x73B0;&#x51FA;&#x4E00;&#x4E9B;&#x4E0D;&#x540C;&#x3002;</li>
<li>&#x672C;&#x8D28;&#x4E0D;&#x540C;&#x70B9;&#xFF1A;
<ul>
<li>&#x5BF9;&#x4E8E; GET &#x65B9;&#x5F0F;&#x7684;&#x8BF7;&#x6C42;&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x4F1A;&#x628A; http header &#x548C; data &#x4E00;&#x5E76;&#x53D1;&#x9001;&#x51FA;&#x53BB;&#xFF0C;&#x670D;&#x52A1;&#x5668;&#x54CD;&#x5E94; 200(&#x8FD4;&#x56DE;&#x6570;&#x636E;)&#xFF1B;</li>
<li>&#x800C;&#x5BF9;&#x4E8E; POST&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x5148;&#x53D1;&#x9001; header&#xFF0C;&#x670D;&#x52A1;&#x5668;&#x54CD;&#x5E94; 100 continue&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x518D;&#x53D1;&#x9001; data&#xFF0C;&#x670D;&#x52A1;&#x5668;&#x54CD;&#x5E94; 200 ok(&#x8FD4;&#x56DE;&#x6570;&#x636E;)&#x3002;</li>
</ul>
</li>
</ul>
<h3 class="mume-header" id="3http-%E7%8A%B6%E6%80%81%E7%A0%81">3.http &#x72B6;&#x6001;&#x7801;</h3>

<ul>
<li>100 &#x4E34;&#x65F6;&#x8BF7;&#x6C42;</li>
<li>200 &#x6210;&#x529F;</li>
<li>301 &#x91CD;&#x5B9A;&#x5411;</li>
<li>302 &#x4E34;&#x65F6;&#x91CD;&#x5B9A;&#x5411;</li>
<li>304 &#x534F;&#x5546;&#x7F13;&#x5B58;&#x8D44;&#x6E90;&#x672A;&#x4FEE;&#x6539;</li>
<li>400 &#x5BA2;&#x6237;&#x7AEF;&#x8BF7;&#x6C42;&#x8BED;&#x6CD5;&#x9519;&#x8BEF;</li>
<li>401 &#x672A;&#x6388;&#x6743;</li>
<li>404 &#x670D;&#x52A1;&#x7AEF;&#x627E;&#x4E0D;&#x5230;&#x8D44;&#x6E90;</li>
<li>405 &#x5BA2;&#x6237;&#x7AEF;&#x65B9;&#x6CD5;&#x88AB;&#x7981;&#x6B62;</li>
<li>500 &#x670D;&#x52A1;&#x5668;&#x5185;&#x90E8;&#x9519;&#x8BEF;</li>
</ul>
<h3 class="mume-header" id="4tcp-%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B%E5%9B%9B%E6%AC%A1%E6%8C%A5%E6%89%8B">4.tcp &#x4E09;&#x6B21;&#x63E1;&#x624B;&#x56DB;&#x6B21;&#x6325;&#x624B;</h3>

<ul>
<li>&#x4E09;&#x6B21;&#x63E1;&#x624B;&#xFF1A;
<ul>
<li>&#x5BA2;&#x6237;&#x7AEF;&#x5411;&#x670D;&#x52A1;&#x5668;&#x7AEF;&#x53D1;&#x9001;&#x4E00;&#x6BB5; TCP &#x62A5;&#x6587; &quot;&#x8BF7;&#x6C42;&#x5EFA;&#x7ACB;&#x65B0;&#x8FDE;&#x63A5;&quot;</li>
<li>&#x670D;&#x52A1;&#x5668;&#x7AEF;&#x63A5;&#x6536;&#x5230;&#x6765;&#x81EA;&#x5BA2;&#x6237;&#x7AEF;&#x7684; TCP &#x62A5;&#x6587;&#x4E4B;&#x540E;&#xFF0C;&#x7ED3;&#x675F; LISTEN &#x9636;&#x6BB5;&#x3002;&#x5E76;&#x53D1;&#x9001;&#x4E00;&#x6BB5; TCP &#x62A5;&#x6587; &quot;&#x540C;&#x610F;&#x5EFA;&#x7ACB;&#x65B0;&#x8FDE;&#x63A5;&quot;</li>
<li>&#x5BA2;&#x6237;&#x7AEF;&#x7AEF;&#x6536;&#x5230;&#x6765;&#x81EA;&#x670D;&#x52A1;&#x5668;&#x7684; TCP &#x62A5;&#x6587;&#x4E4B;&#x540E;,&#x53D1;&#x9001;&#x6700;&#x540E;&#x4E00;&#x6BB5; TCP &#x62A5;&#x6587; &quot;&#x660E;&#x786E;&#x5BA2;&#x6237;&#x7AEF;&#x548C;&#x670D;&#x52A1;&#x7AEF;&#x6570;&#x636E;&#x4F20;&#x8F93;&#x6B63;&#x5E38;&#xFF0C;&#x786E;&#x5B9A;&#x5EFA;&#x7ACB;&#x8FDE;&#x63A5;&quot;</li>
</ul>
</li>
<li>&#x56DB;&#x6B21;&#x6325;&#x624B;:
<ul>
<li>&#x5BA2;&#x6237;&#x7AEF;&#x5411;&#x670D;&#x52A1;&#x5668;&#x7AEF;&#x53D1;&#x9001;&#x4E00;&#x6BB5; TCP &#x62A5;&#x6587; &quot;&#x8BF7;&#x6C42;&#x91CA;&#x653E;&#x8FDE;&#x63A5;&quot;</li>
<li>&#x670D;&#x52A1;&#x5668;&#x7AEF;&#x63A5;&#x6536;&#x5230;&#x6765;&#x81EA;&#x5BA2;&#x6237;&#x7AEF;&#x7684; TCP &#x62A5;&#x6587;&#x4E4B;&#x540E;,&#x5F00;&#x59CB;&#x505A;&#x91CA;&#x653E;&#x8FDE;&#x63A5;&#x51C6;&#x5907;&#xFF0C;&#x5E76;&#x53D1;&#x9001;&#x4E00;&#x6BB5;&#x62A5;&#x6587; &quot;&#x786E;&#x8BA4;&#x4E86;&#x5BA2;&#x6237;&#x7AEF;&#x60F3;&#x8981;&#x91CA;&#x653E;&#x8FDE;&#x63A5;&quot;</li>
<li>&#x91CA;&#x653E;&#x8FDE;&#x63A5;&#x51C6;&#x5907;&#x5B8C;&#x6210;&#x540E;&#xFF0C;&#x518D;&#x6B21;&#x53D1;&#x9001;&#x4E00;&#x6BB5;&#x62A5;&#x6587; &quot;&#x5DF2;&#x505A;&#x597D;&#x91CA;&#x653E;&#x8FDE;&#x63A5;&#x51C6;&#x5907;&quot;</li>
<li>&#x5BA2;&#x6237;&#x7AEF;&#x7AEF;&#x6536;&#x5230;&#x6765;&#x81EA;&#x670D;&#x52A1;&#x5668;&#x7684; TCP &#x62A5;&#x6587;&#x4E4B;&#x540E;,&#x53D1;&#x9001;&#x6700;&#x540E;&#x4E00;&#x6BB5; TCP &#x62A5;&#x6587; &quot;&#x786E;&#x8BA4;&#x4E86;&#x670D;&#x52A1;&#x5668;&#x7AEF;&#x5DF2;&#x505A;&#x597D;&#x91CA;&#x653E;&#x8FDE;&#x63A5;&quot;</li>
</ul>
</li>
</ul>
<h2 class="mume-header" id="vue-httpswwwnowcodercomdiscuss622394typeallordertimepospage1channel-1source_idsearch_all_nctrack">vue  <a href="https://www.nowcoder.com/discuss/622394?type=all&amp;order=time&amp;pos=&amp;page=1&amp;channel=-1&amp;source_id=search_all_nctrack">https://www.nowcoder.com/discuss/622394?type=all&amp;order=time&amp;pos=&amp;page=1&amp;channel=-1&amp;source_id=search_all_nctrack</a></h2>

<h3 class="mume-header" id="1vue-%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86">1.Vue &#x53CC;&#x5411;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x539F;&#x7406;</h3>

<ul>
<li>&#x91C7;&#x7528;&#x6570;&#x636E;&#x52AB;&#x6301;&#x7ED3;&#x5408;&#x53D1;&#x5E03;-&#x8BA2;&#x9605;&#x6A21;&#x5F0F;,&#x901A;&#x8FC7; Object.defineproperty &#x6765;&#x52AB;&#x6301;&#x5404;&#x4E2A;&#x5C5E;&#x6027;&#x7684; setter,getter,&#x5728;&#x6570;&#x636E;&#x53D8;&#x52A8;&#x65F6;&#x53D1;&#x5E03;&#x6D88;&#x606F;&#x7ED9;&#x8BA2;&#x9605;&#x8005;,&#x89E6;&#x53D1;&#x54CD;&#x5E94;&#x7684;&#x76D1;&#x542C;&#x56DE;&#x8C03;</li>
</ul>
<h3 class="mume-header" id="2%E4%BB%80%E4%B9%88%E6%98%AF-mvvm">2.&#x4EC0;&#x4E48;&#x662F; MVVM</h3>

<ul>
<li>Model&#xFF1A;&#x4EE3;&#x8868;&#x6570;&#x636E;&#x6A21;&#x578B;</li>
<li>View&#xFF1A;UI &#x7EC4;&#x4EF6;</li>
<li>ViewModel&#xFF1A;&#x8FDE;&#x63A5; View &#x548C; model,&#x76D1;&#x542C;&#x6570;&#x636E;&#x7684;&#x6539;&#x53D8;&#xFF0C;&#x63A7;&#x5236;&#x89C6;&#x56FE;&#x884C;&#x4E3A;&#xFF0C;&#x5904;&#x7406;&#x7528;&#x6237;&#x4EA4;&#x4E92;</li>
</ul>
<h3 class="mume-header" id="3vuex-%E6%98%AF%E4%BB%80%E4%B9%88%E6%80%8E%E4%B9%88%E4%BD%BF%E7%94%A8%E5%93%AA%E7%A7%8D%E5%8A%9F%E8%83%BD%E5%9C%BA%E6%99%AF%E4%BD%BF%E7%94%A8%E5%AE%83">3.vuex &#x662F;&#x4EC0;&#x4E48;&#xFF1F;&#x600E;&#x4E48;&#x4F7F;&#x7528;&#xFF1F;&#x54EA;&#x79CD;&#x529F;&#x80FD;&#x573A;&#x666F;&#x4F7F;&#x7528;&#x5B83;&#xFF1F;</h3>

<ul>
<li>vuex &#x662F;&#x4E00;&#x79CD;&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x6A21;&#x5F0F;,&#x591A;&#x4E2A;&#x7EC4;&#x4EF6;&#x5171;&#x4EAB;&#x72B6;&#x6001;&#x65F6;&#xFF0C;&#x4F7F;&#x7528; vuex&#x3002;</li>
<li>&#x65B0;&#x5EFA; store.js,main.js &#x4E2D;&#x5F15;&#x7528; store.js<pre data-role="codeBlock" data-info="js" class="language-javascript">vue<span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span><span class="token maybe-class-name">Vuex</span><span class="token punctuation">)</span>
<span class="token keyword module">export</span> defult <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    state<span class="token operator">:</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// &#x6570;&#x636E;</span>
    mutations<span class="token operator">:</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>   <span class="token comment">// &#x540C;&#x6B65;</span>
    actions<span class="token operator">:</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>     <span class="token comment">//&#x5F02;&#x6B65;</span>
    getters<span class="token operator">:</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// &#x8BA1;&#x7B97;&#x5C5E;&#x6027;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> mapMutations<span class="token punctuation">,</span> mapGetters<span class="token punctuation">,</span> mapState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">&quot;vuex&quot;</span><span class="token punctuation">;</span>
</pre></li>
<li>&#x5728; module &#x6587;&#x4EF6;&#x65B0;&#x5EFA; moduleA.js &#x548C; moduleB.js &#x6587;&#x4EF6;&#x3002;&#x5728;&#x6587;&#x4EF6;&#x4E2D;&#x5199;&#x5165;<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> getters <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">//...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> mutations <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">//...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> actions <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">//...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
  state<span class="token punctuation">,</span>
  getters<span class="token punctuation">,</span>
  mutations<span class="token punctuation">,</span>
  actions<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  modules<span class="token operator">:</span> <span class="token punctuation">{</span>
    moduleA<span class="token punctuation">,</span>
    moduleB<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></li>
</ul>
<h3 class="mume-header" id="4v-if-%E5%92%8C-v-show-%E7%9A%84%E5%8C%BA%E5%88%AB">4.v-if &#x548C; v-show &#x7684;&#x533A;&#x522B;</h3>

<ul>
<li>v-if &#x9500;&#x6BC1;&#x548C;&#x91CD;&#x5EFA; dom</li>
<li>v-show &#x4FEE;&#x6539;&#x5143;&#x7D20;&#x7684; display &#x8BA9;&#x5143;&#x7D20;&#x663E;&#x793A;&#x548C;&#x9690;&#x85CF;</li>
</ul>
<h3 class="mume-header" id="5keep-aive-%E7%9A%84%E4%BD%9C%E7%94%A8">5.keep-aive &#x7684;&#x4F5C;&#x7528;</h3>

<ul>
<li>&#x4FDD;&#x7559;&#x7EC4;&#x4EF6;&#x72B6;&#x6001;</li>
</ul>
<h3 class="mume-header" id="6vue-%E7%BB%84%E4%BB%B6%E9%97%B4%E4%BC%A0%E5%80%BC">6.vue &#x7EC4;&#x4EF6;&#x95F4;&#x4F20;&#x503C;</h3>

<ul>
<li>&#x7236;&#x4F20;&#x5B50; props &#x5B50;&#x4F20;&#x7236; $emit(&#x2018;&#x65B9;&#x6CD5;&#x540D;&#x2019;, &#x4F20;&#x9012;&#x7684;&#x6570;&#x636E;) &#x5144;&#x5F1F;&#xFF1A;vuex</li>
</ul>
<h3 class="mume-header" id="7vue-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9Fcreate-%E4%B8%8E-mounted-%E7%9A%84%E5%8C%BA%E5%88%AB">7.vue &#x751F;&#x547D;&#x5468;&#x671F;&#xFF0C;create &#x4E0E; mounted &#x7684;&#x533A;&#x522B;</h3>

<ul>
<li>&#x521B;&#x5EFA;&#x524D;/&#x540E;, &#x8F7D;&#x5165;&#x524D;/&#x540E;,&#x66F4;&#x65B0;&#x524D;/&#x540E;,&#x9500;&#x6BC1;&#x524D;/&#x9500;&#x6BC1;&#x540E;</li>
<li>create/mount/update/destory</li>
<li>&#x7B2C;&#x4E00;&#x6B21;&#x9875;&#x9762;&#x52A0;&#x8F7D;&#x4F1A;&#x89E6;&#x53D1;&#x54EA;&#x51E0;&#x4E2A;&#x94A9;&#x5B50;&#xFF1F;
<ul>
<li>&#x521B;&#x5EFA;&#x524D;/&#x540E;, &#x8F7D;&#x5165;&#x524D;/&#x540E;</li>
</ul>
</li>
<li>DOM &#x6E32;&#x67D3;&#x5728; &#x54EA;&#x4E2A;&#x5468;&#x671F;&#x4E2D;&#x5C31;&#x5DF2;&#x7ECF;&#x5B8C;&#x6210;&#xFF1F;
<ul>
<li>DOM &#x6E32;&#x67D3;&#x5728; mounted &#x4E2D;&#x5C31;&#x5DF2;&#x7ECF;&#x5B8C;&#x6210;&#x4E86;</li>
</ul>
</li>
<li>create &#x4E0E; mounted &#x7684;&#x533A;&#x522B;&#xFF1A;
<ul>
<li>&#x662F;&#x5728;&#x9875;&#x9762;&#x6E32;&#x67D3;&#x4E4B;&#x524D;&#x53D1;&#x751F;&#x7684; &#xFF0C;&#x5982;&#x679C;&#x60F3;&#x8981;&#x83B7;&#x53D6;&#x6570;&#x636E;&#x6E32;&#x67D3;&#x5230; html &#x4E4B;&#x540E;&#x5143;&#x7D20;&#x7684;&#x5BBD;&#x9AD8; &#x8FD9;&#x4E9B;&#x4E8B;&#x62FF;&#x4E0D;&#x5230;&#x7684;&#x3002;</li>
<li>&#x662F;&#x5728;&#x6E32;&#x67D3; data &#x91CC;&#x9762;&#x7684;&#x6570;&#x636E;&#x5230;&#x9875;&#x9762;&#x4E0A;&#x4E4B;&#x540E; &#x53D1;&#x751F;&#x7684; &#x6240;&#x4EE5;&#x8FD9;&#x65F6;&#x5019;&#x53BB;&#x5143;&#x7D20;&#x7684;&#x5177;&#x4F53;&#x4FE1;&#x606F;&#x662F;&#x53EF;&#x4EE5;&#x62FF;&#x5230;&#x7684;&#x3002;</li>
</ul>
</li>
</ul>
<h3 class="mume-header" id="8vue-%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0">8.vue &#x94A9;&#x5B50;&#x51FD;&#x6570;</h3>

<ul>
<li>beforeEach &#x5168;&#x5C40;&#x524D;&#x7F6E;&#x5B88;&#x536B; &#x8FDB;&#x5165;&#x8DEF;&#x7531;&#x4E4B;&#x524D;</li>
<li>router.beforeResolve &#x5168;&#x5C40;&#x89E3;&#x6790;&#x5B88;&#x536B;(2.5.0+) ***</li>
<li>afterEach &#x5168;&#x5C40;&#x540E;&#x7F6E;&#x94A9;&#x5B50; &#x8FDB;&#x5165;&#x8DEF;&#x7531;&#x4E4B;&#x540E;
<ul>
<li>to /from &#x5C06;&#x8981;&#x8FDB;&#x5165;&#x548C;&#x5C06;&#x8981;&#x79BB;&#x5F00;&#x7684;&#x8DEF;&#x7531;&#x5BF9;&#x8C61;</li>
<li>next&#xFF1A; &#x8DF3;&#x8F6C;&#x65B0;&#x8DEF;&#x7531;&#x3002;</li>
</ul>
</li>
</ul>
<h3 class="mume-header" id="9-%E5%85%A8%E5%B1%80%E8%BF%87%E6%BB%A4%E5%99%A8">9. &#x5168;&#x5C40;&#x8FC7;&#x6EE4;&#x5668;</h3>

<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token string">&quot;formatRMB&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword control-flow">return</span> <span class="token string">&quot;&#x4EBA;&#x6C11;&#x5E01;&#xFFE5;&quot;</span> <span class="token operator">+</span> v<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><ul>
<li>&#x5C40;&#x90E8;&#xFF1A;filters:{}</li>
</ul>
<h3 class="mume-header" id="10-%E5%85%A8%E5%B1%80%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4">10. &#x5168;&#x5C40;&#x81EA;&#x5B9A;&#x4E49;&#x6307;&#x4EE4;</h3>

<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">directive</span><span class="token punctuation">(</span><span class="token string">&quot;color&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">bind</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> binding<span class="token punctuation">,</span> vnode<span class="token punctuation">,</span> oldVnode</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">$</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">css</span><span class="token punctuation">(</span><span class="token string">&quot;color&quot;</span><span class="token punctuation">,</span> binding<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">$</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">html</span><span class="token punctuation">(</span><span class="token string">&quot;&#x5B57;&#x4F53;&#x989C;&#x8272;:&quot;</span> <span class="token operator">+</span> binding<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><ul>
<li>&#x5C40;&#x90E8;&#xFF1A; directives:{}</li>
</ul>
<h3 class="mume-header" id="11nexttick">11.nextTick</h3>

<ul>
<li>&#x5F53; dom &#x53D1;&#x751F;&#x53D8;&#x5316;&#xFF0C;&#x66F4;&#x65B0;&#x540E;&#x6267;&#x884C;&#x7684;&#x56DE;&#x8C03;&#xFF0C;&#x5B83;&#x5C31;&#x50CF;&#x662F;&#x4E00;&#x4E2A; setTimeout &#x51FD;&#x6570;&#xFF0C;&#x5C06;&#x51FD;&#x6570;&#x653E;&#x5230;&#x5F02;&#x6B65;&#x540E;&#x53BB;&#x5904;&#x7406;(&#x89E3;&#x91CA;&#x4E8B;&#x4EF6;&#x5FAA;&#x73AF;&#x5FAE;&#x4EFB;&#x52A1;)</li>
</ul>
<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token arrow operator">=&gt;</span><span class="token punctuation">{</span>
  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelecttor</span><span class="token punctuation">(</span>&apos;<span class="token punctuation">.</span><span class="token property-access">txt</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">offSetHeight</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre><h3 class="mume-header" id="12vue-%E9%A6%96%E5%B1%8F%E7%99%BD%E5%B1%8F%E4%BC%98%E5%8C%96">12.vue &#x9996;&#x5C4F;&#x767D;&#x5C4F;&#x4F18;&#x5316;</h3>

<ul>
<li>&#x9996;&#x9875;&#x52A0; loading &#x6216; &#x9AA8;&#x67B6;&#x5C4F;</li>
<li>vue.config.js &#x4E2D;&#x5173;&#x95ED; map &#x6587;&#x4EF6; productionSourceMap: false,&#xFF08;&#x9879;&#x76EE;&#x6253;&#x5305;&#x540E;&#xFF0C;&#x4EE3;&#x7801;&#x90FD;&#x662F;&#x7ECF;&#x8FC7;&#x538B;&#x7F29;&#x52A0;&#x5BC6;&#x7684;&#xFF0C;&#x5982;&#x679C;&#x8FD0;&#x884C;&#x65F6;&#x62A5;&#x9519;&#xFF0C;&#x8F93;&#x51FA;&#x7684;&#x9519;&#x8BEF;&#x4FE1;&#x606F;&#x65E0;&#x6CD5;&#x51C6;&#x786E;&#x5F97;&#x77E5;&#x662F;&#x54EA;&#x91CC;&#x7684;&#x4EE3;&#x7801;&#x62A5;&#x9519;&#x3002;<br>
&#x6709;&#x4E86;map&#x5C31;&#x53EF;&#x4EE5;&#x50CF;&#x672A;&#x52A0;&#x5BC6;&#x7684;&#x4EE3;&#x7801;&#x4E00;&#x6837;&#xFF0C;&#x51C6;&#x786E;&#x7684;&#x8F93;&#x51FA;&#x662F;&#x54EA;&#x4E00;&#x884C;&#x54EA;&#x4E00;&#x5217;&#x6709;&#x9519;&#x3002;&#xFF09;</li>
<li>&#x9759;&#x6001;&#x8D44;&#x6E90;&#x653E;&#x5165; CDN</li>
<li>ui&#x6846;&#x67B6;&#x6309;&#x9700;&#x52A0;&#x8F7D;</li>
<li>&#x8DEF;&#x7531;&#x61D2;&#x52A0;&#x8F7D;
<ul>
<li>Vue &#x5F02;&#x6B65;&#x7EC4;&#x4EF6;&#x6280;&#x672F;&#xFF1A;component: resolve =&gt; require([&apos;../views/home.vue&apos;], resolve)</li>
<li>es6 &#x63D0;&#x6848;&#x7684; import()&#xFF1A;component: () =&gt; import(&apos;../views/home.vue&apos;)</li>
<li>webpack &#x63D0;&#x4F9B;&#x7684; require.ensure()&#xFF1A;component: r =&gt; require.ensure([],() =&gt; r(require(&apos;../views/home.vue&apos;)), &apos;home&apos;)</li>
</ul>
</li>
<li>&#x7EC4;&#x4EF6;&#x61D2;&#x52A0;&#x8F7D;&#xFF1A;</li>
</ul>
<pre data-role="codeBlock" data-info="js" class="language-javascript">  components<span class="token operator">:</span><span class="token punctuation">{</span>
      <span class="token string">&quot;dailyModal&quot;</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token arrow operator">=&gt;</span><span class="token keyword module">import</span><span class="token punctuation">(</span><span class="token string">&quot;./dailyModal.vue&quot;</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  components<span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token string">&quot;dailyModal&quot;</span><span class="token operator">:</span><span class="token parameter">resolve</span><span class="token arrow operator">=&gt;</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&apos;./dailyModal.vue&apos;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>resolve<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</pre><h2 class="mume-header" id="react">react</h2>

<h3 class="mume-header" id="1%E5%8C%BA%E5%88%86-real-dom-%E5%92%8C-virtual-dom">1.&#x533A;&#x5206; real DOM &#x548C; Virtual DOM</h3>

<ul>
<li>&#x66F4;&#x65B0;&#x7F13;&#x6162;&#xFF0C;dom &#x64CD;&#x4F5C;&#x4EE3;&#x4EF7;&#x9AD8;&#xFF0C;&#x6D88;&#x8017;&#x5185;&#x5B58;&#x591A;&#xFF0C;&#x53EF;&#x76F4;&#x63A5;&#x66F4;&#x65B0; html &#x5143;&#x7D20;&#x66F4;&#x65B0;&#x521B;&#x5EFA;&#x65B0; dom<br>
&#x66F4;&#x65B0;&#x7F13;&#x5FEB;&#xFF0C;dom &#x64CD;&#x4F5C;&#x4EE3;&#x4EF7;&#x4F4E;&#xFF0C;&#x6D88;&#x8017;&#x5185;&#x5B58;&#x5C11;&#xFF0C;&#x4E0D;&#x80FD;&#x76F4;&#x63A5;&#x66F4;&#x65B0; html &#x5143;&#x7D20;&#x66F4;&#x65B0;&#x5219;&#x66F4;&#x65B0; jsx</li>
</ul>
<h3 class="mume-header" id="2%E4%B8%BA%E4%BB%80%E4%B9%88%E6%B5%8F%E8%A7%88%E5%99%A8%E6%97%A0%E6%B3%95%E8%AF%BB%E5%8F%96-jsx">2.&#x4E3A;&#x4EC0;&#x4E48;&#x6D4F;&#x89C8;&#x5668;&#x65E0;&#x6CD5;&#x8BFB;&#x53D6; JSX&#xFF1F;</h3>

<ul>
<li>&#x6D4F;&#x89C8;&#x5668;&#x53EA;&#x80FD;&#x5904;&#x7406; JavaScript &#x5BF9;&#x8C61;&#xFF0C;&#x800C;&#x4E0D;&#x80FD;&#x8BFB;&#x53D6;&#x5E38;&#x89C4; JavaScript &#x5BF9;&#x8C61;&#x4E2D;&#x7684; JSX&#x3002;&#x6240;&#x4EE5;&#x4E3A;&#x4E86;&#x4F7F;&#x6D4F;&#x89C8;&#x5668;&#x80FD;&#x591F;&#x8BFB;&#x53D6; JSX&#xFF0C;&#x9996;&#x5148;&#xFF0C;&#x9700;&#x8981;&#x7528;&#x50CF; Babel &#x8FD9;&#x6837;&#x7684; JSX &#x8F6C;&#x6362;&#x5668;&#x5C06; JSX &#x6587;&#x4EF6;&#x8F6C;&#x6362;&#x4E3A; JavaScript &#x5BF9;&#x8C61;&#xFF0C;&#x7136;&#x540E;&#x518D;&#x5C06;&#x5176;&#x4F20;&#x7ED9;&#x6D4F;&#x89C8;&#x5668;</li>
</ul>
<h3 class="mume-header" id="3react-%E4%B8%AD%E7%9A%84%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6%E5%92%8C%E9%9D%9E%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6">3.react &#x4E2D;&#x7684;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x548C;&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;</h3>

<ul>
<li>&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#xFF1A;&#x7531; React &#x63A7;&#x5236;&#x7684;&#x8F93;&#x5165;&#x8868;&#x5355;&#x5143;&#x7D20;&#x800C;&#x6539;&#x53D8;&#x5176;&#x503C;&#xFF0C;&#x53D7; setState()&#x7684;&#x63A7;&#x5236;</li>
<li>&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#xFF1A;ref &#x4ECE; DOM &#x83B7;&#x53D6;&#x8868;&#x5355;&#x503C;&#xFF0C;&#x4E0D;&#x53D7; setState()&#x7684;&#x63A7;&#x5236;</li>
</ul>
<h3 class="mume-header" id="4%E4%BB%80%E4%B9%88%E6%98%AF-react-%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6">4.&#x4EC0;&#x4E48;&#x662F; react &#x9AD8;&#x9636;&#x7EC4;&#x4EF6;</h3>

<ul>
<li>&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x662F;&#x53C2;&#x6570;&#x4E3A;&#x7EC4;&#x4EF6;&#xFF0C;&#x8FD4;&#x56DE;&#x503C;&#x4E3A;&#x65B0;&#x7EC4;&#x4EF6;&#x7684;&#x51FD;&#x6570;&#x3002;&#x4E00;&#x4E2A;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x53EA;&#x662F;&#x4E00;&#x4E2A;&#x5305;&#x88C5;&#x4E86;&#x53E6;&#x5916;&#x4E00;&#x4E2A; React &#x7EC4;&#x4EF6;&#x7684; React &#x7EC4;&#x4EF6;&#x3002;</li>
</ul>
<h3 class="mume-header" id="5%E4%BB%80%E4%B9%88%E6%98%AF-jsx">5.&#x4EC0;&#x4E48;&#x662F; JSX</h3>

<ul>
<li>JSX &#x5373; JavaScript XML&#x3002;&#x4E00;&#x79CD;&#x5728; React &#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x6784;&#x5EFA;&#x6807;&#x7B7E;&#x7684;&#x7C7B; XML &#x8BED;&#x6CD5;&#x3002;JSX &#x4E3A; react.js &#x5F00;&#x53D1;&#x7684;&#x4E00;&#x5957;&#x8BED;&#x6CD5;&#x7CD6;&#xFF0C;&#x4E5F;&#x662F; react.js &#x7684;&#x4F7F;&#x7528;&#x57FA;&#x7840;&#x3002;</li>
</ul>
<h3 class="mume-header" id="6vue-%E5%92%8C-react-%E7%9A%84%E5%8C%BA%E5%88%AB">6.vue &#x548C; react &#x7684;&#x533A;&#x522B;</h3>

<ul>
<li>&#x76F8;&#x540C;&#x70B9;
<ul>
<li>&#x90FD;&#x662F;&#x7528;&#x4E86; Virtual DOM</li>
<li>&#x90FD;&#x652F;&#x6301;&#x7EC4;&#x4EF6;&#x5316;&#xFF0C;&#x90FD;&#x662F;&#x6570;&#x636E;&#x9A71;&#x52A8;&#x89C6;&#x56FE;</li>
</ul>
</li>
<li>&#x4E0D;&#x540C;&#x70B9;&#xFF1A;
<ul>
<li>Vue &#x672C;&#x8D28;&#x662F; MVVM &#x6846;&#x67B6;&#xFF0C;&#x7531; MVC &#x53D1;&#x5C55;&#x800C;&#x6765;&#xFF1B;React &#x662F;&#x524D;&#x7AEF;&#x7EC4;&#x4EF6;&#x5316;&#x6846;&#x67B6;&#xFF0C;&#x7531;&#x540E;&#x7AEF;&#x7EC4;&#x4EF6;&#x5316;&#x53D1;&#x5C55;&#x800C;&#x6765;&#xFF1B;</li>
<li>Vue &#x7684;&#x8DEF;&#x7531;&#x5E93;&#x548C;&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x5E93;&#x90FD;&#x7531;&#x5B98;&#x65B9;&#x7EF4;&#x62A4;&#x652F;&#x6301;&#x4E14;&#x4E0E;&#x6838;&#x5FC3;&#x5E93;&#x540C;&#x6B65;&#x66F4;&#x65B0;&#xFF0C;&#x800C; React &#x9009;&#x62E9;&#x628A;&#x8FD9;&#x4E9B;&#x95EE;&#x9898;&#x4EA4;&#x7ED9;&#x793E;&#x533A;&#x7EF4;&#x62A4;&#xFF0C;&#x56E0;&#x6B64;&#x751F;&#x6001;&#x66F4;&#x4E30;&#x5BCC;</li>
<li>vue&#x91C7;&#x7528;&#x7684;&#x6A21;&#x677F;&#x8BED;&#x6CD5;&#xFF0C;react&#x521B;&#x9020;&#x4E86;jsx&#x8BED;&#x6CD5;&#xFF0C;&#x5141;&#x8BB8;&#x5728;js&#x4E2D;&#x4E66;&#x5199;html&#x4EE3;&#x7801;</li>
<li>&#x6570;&#x636E;&#x7684;&#x54CD;&#x5E94;&#x3002;vue&#x6570;&#x636E;&#x53D8;&#x52A8;&#x65F6;&#xFF0C;&#x6570;&#x636E;&#x672C;&#x8EAB;&#x4F1A;&#x628A;&#x53D8;&#x52A8;&#x63A8;&#x9001;&#x51FA;&#x53BB;&#xFF0C;&#x544A;&#x77E5;&#x6E32;&#x67D3;&#x7CFB;&#x7EDF;&#x81EA;&#x52A8;&#x6E32;&#x67D3;&#x3002;react&#x9700;&#x8981;&#x7ED9;&#x4E00;&#x4E2A;&#x660E;&#x786E;&#x7684;&#x4FE1;&#x53F7;&#x544A;&#x77E5;&#x6E32;&#x67D3;&#x7CFB;&#x7EDF;&#x66F4;&#x65B0;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x8C03;&#x7528;setState&#x65B9;&#x6CD5;&#x66F4;&#x65B0;&#x6570;&#x636E;</li>
<li>Vue &#x7684;&#x54CD;&#x5E94;&#x5F0F;&#x673A;&#x5236;&#x4E5F;&#x5B58;&#x5728;&#x4E00;&#x4E9B;&#x95EE;&#x9898;&#xFF0C;&#x5F53; state &#x7279;&#x522B;&#x591A;&#x7684;&#x65F6;&#x5019;&#xFF0C;Watcher &#x4F1A;&#x5F88;&#x591A;&#xFF0C;&#x4F1A;&#x5BFC;&#x81F4;&#x5361;&#x987F;&#xFF0C;&#x6240;&#x4EE5;&#x5927;&#x578B;&#x5E94;&#x7528;&#xFF08;&#x72B6;&#x6001;&#x7279;&#x522B;&#x591A;&#x7684;&#xFF09;&#x4E00;&#x822C;&#x7528; React&#xFF0C;&#x66F4;&#x52A0;&#x53EF;&#x63A7;</li>
</ul>
</li>
</ul>
<h3 class="mume-header" id="7render-hoc-%E5%92%8C-hooks-%E7%9A%84%E5%8C%BA%E5%88%AB">7.render hoc &#x548C; hooks &#x7684;&#x533A;&#x522B;</h3>

<ul>
<li>hoc &#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x662F;&#x63A5;&#x6536;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x4E3A;&#x53C2;&#x6570;&#xFF0C;&#x8FD4;&#x56DE;&#x65B0;&#x7EC4;&#x4EF6;&#x7684;&#x7EC4;&#x4EF6;&#xFF0C;&#x63D0;&#x53D6;&#x516C;&#x5171;&#x903B;&#x8F91;&#xFF0C;&#x964D;&#x4F4E;&#x8026;&#x5408;&#x5EA6;&#x3002;</li>
<li>renderProps &#x7EC4;&#x4EF6;&#x63A5;&#x6536;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x8FD9;&#x4E2A;&#x51FD;&#x6570;&#x83B7;&#x53D6;&#x7EC4;&#x4EF6;&#x7684; state &#x5B9E;&#x73B0;&#x6E32;&#x67D3;&#x903B;&#x8F91;&#x3002;&#x6E05;&#x695A;&#x77E5;&#x9053;&#x8FD9;&#x4E2A; state &#x6765;&#x81EA;&#x54EA;&#x91CC;&#x3002;&#x7F3A;&#x70B9;&#xFF1A;&#x4F7F;&#x7528;&#x8D77;&#x6765;&#x4F1A;&#x5D4C;&#x5957;&#x5730;&#x72F1;,&#x4E0D;&#x80FD;&#x5728; return &#x5916;&#x4F7F;&#x7528;&#x6570;&#x636E;&#x3002;</li>
<li>hooks &#x8BA9;&#x6211;&#x5728;&#x4E0D;&#x7F16;&#x5199; class &#x7684;&#x60C5;&#x51B5;&#x4E0B;&#x53EF;&#x4EE5;&#x4F7F;&#x7528; state &#x547D;&#x540D;&#x51B2;&#x7A81;&#xFF0C;&#x53EF;&#x4EE5;&#x8FDB;&#x884C;&#x91CD;&#x547D;&#x540D;&#xFF0C;&#x76F8;&#x540C;&#x7684;&#x51FD;&#x6570;&#x903B;&#x8F91;&#x5199;&#x5728;&#x4E00;&#x8D77;</li>
</ul>

      </div>
      
      
    
    
    
    
    
    
    
    
  
    </body></html>